日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

0%

发表于 分类于

DNS服务器列表

服务商 IPV4 IPV6
114DNS 114.114.114.114 114.114.115.115 -
DNSPod DNS 119.29.29.29 182.254.116.116 2402:4e00::
cnnicDNS 1.2.4.8 210.2.4.8 2001:dc7:1000::1
GoogleDNS 8.8.8.8 8.8.4.4 2001:4860:4860::8888 2001:4860:4860::8844
阿里云DNS 223.5.5.5 223.6.6.6 2400:3200::1 2400:3200:baba::1
腾讯云DNS 183.60.83.19 183.60.82.98 -
百度云DNS 180.76.76.76 2400:da00::6666
微软云DNS 4.2.2.1 4.2.2.2 -

发表于 更新于 分类于

yarn的设置

在根目录下创建一个新的文件 .yarnrc

输入以下内容

1
2
3
registry: https://registry.npm.taobao.org
ENTRYCLI_CDNURL: https://cdn.npm.taobao.org/dist/sentry-cli
sentrycli_cdnurl: https://cdn.npm.taobao.org/dist/sentry-cli

yarn及npm国内镜像源

npm

淘宝镜像

1
npm config set registry=https://registry.npm.taobao.org

腾讯云镜像

1
npm config set registry http://mirrors.cloud.tencent.com/npm/

华为云镜像源

1
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

yarn

腾讯云镜像

1
2
yarn config set -g registry http://mirrors.cloud.tencent.com/npm/
yarn config set -g sass_binary_site http://mirrors.cloud.tencent.com/npm/node-sass/

查看配置

yarn config list

如果包含了上面代码中的内容，就表示成功了。

发表于 更新于 分类于

首先不推荐使用Ubuntu默认的yarn安装,版本太低。

  1. 首先在Ubuntu的源中添加yarn的源地址
    1
    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -  
    1
    echo "deb https://dl.yarnpkg.com/debian/ rc main" | sudo tee /etc/apt/sources.list.d/yarn.list
    阅读全文 »

发表于 分类于

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<form>
    <fieldset>
        <legend>问卷调查</legend>
        <ol class="cs-ques-ul">
            <li class="cs-ques-li">
                <input type="radio" name="ques1" required>1-3年
                <input type="radio" name="ques1">3-5年
                <input type="radio" name="ques1">5年以上
                <h4 class="cs-caption">你从事前端几年了？</h4>
            </li>
            <li class="cs-ques-li">
                <input type="radio" name="ques2" required>1-3小时
                <input type="radio" name="ques2">3-5小时
                <input type="radio" name="ques2">小时以上
                <h4 class="cs-caption">你每周多少业余时间用来学习前端技术？</h4>
            </li>
            <li class="cs-ques-li">
                <input type="radio" name="ques3" required>1-3本
                <input type="radio" name="ques3">3-5本
                <input type="radio" name="ques3">5本以上
                <h4 class="cs-caption">你每年买多少本前端相关数据？</h4>
            </li>
            <li class="cs-ques-li">
                <textarea></textarea>
                <h4 class="cs-caption">有什么其它想说的？</h4>
            </li>
        </ol>
        <p><input type="submit" value="提交"></p>
    </fieldset>
</form>
<style>
.cs-ques-ul {
    counter-reset: quesIndex;
}
.cs-ques-li {
    display: table;
    width: 100%;
    position: relative;
}
/* 前面序号计数显示与定位 */
.cs-ques-li::before {
    counter-increment: quesIndex;
    content: counter(quesIndex) ".";
    position: absolute; top: .75em;
    margin: 0 0 0 -20px;
}
.cs-caption {
    display: table-caption;
    caption-side: top;
}
/* 标记必选还是可选 */
:optional ~ .cs-caption::after {
    content: "（可选）";
    color: gray;
}
:required ~ .cs-caption::after {
    content: "（必选）";
    color: red;
}
</style>

发表于 分类于

截图

CSS验证码个数判断简单

代码

1
2
3
4
5
<style>
  :indeterminate ~ .cs-valid-tips::before{content:"您尚未选择任何选项"; color: red; font-size: 87.5%;}
</style>

验证码: <input type="text" required pattern="\w{4,6}" class="ch09ex02">

发表于 分类于

截图

CSS 制作表单单选项未选择提醒

代码

1
2
3
4
5
6
7
8
9
10
<style>
  :indeterminate ~ .cs-valid-tips::before{content:"您尚未选择任何选项"; color: red; font-size: 87.5%;}
</style>
<input type="radio" id="radio1" name="raido">
<label for="radio1">单选项1</label>
<input type="radio" id="radio2" name="raido">
<label for="radio2">单选项2</label>
<input type="radio" id="radio3" name="raido">
<label for="radio3">单选项3</label>
<p class="cs-valid-tips"></p>

发表于 分类于

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .input-fill:placeholder-shown::placeholder{color: transparent}
    .input-fill-x{position: relative; margin:50px}
    .input-fill{padding:5px}
    .input-lable{
      position: absolute;
      left: 5px;
      top: 3px;
      pointer-events: none;
    }
    .input-fill:not(:placeholder-shown) ~ .input-label, .input-fill:focus ~ .input-lable{transform: scale(0.75) translate(0, -20px); background: #FFF; padding: 2px 4px}
  </style>
</head>
<body>
  <div class="input-fill-x">
    <input class="input-fill" placeholder="Email">
    <lable class="input-lable">Email</lable>
  </div>
</body>
</html>

发表于 分类于

Ubuntu镜像源服务器列表

首先介绍一个网站，统计了所有的世界上的Ubuntu镜像源服务器
https://launchpad.net/ubuntu/+cdmirrors
你可以通过这个网址查看到想要的镜像源服务器。

发表于 分类于 
1
2
3
4
5
6
7
8
9
10
deb http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-proposed main restricted universe multiverse
阅读全文 »

发表于 更新于 分类于

动态加载Javascript脚本文件，可以更好的提高Javascript的读取效率
在不影响DOM的情况下，我们可以将一部分js文件动态加载，使页面响应更快速，
下面的代码可以作为动态加载进行使用，

利用自定义函数加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function loadScript(url, callback){
  var script = document.createElement("script"); //创建script标签
  script.type="text/javascript";

  //执行后提示，可以不用填写
  script.onload = function(){
    callback();
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("js/script1.js", function(){
  alert("Loaded!");
})

利用XMLHttpRequest脚本注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const xhr = new XMLHttpRequest();
xhr.open("get", "js/script1.js", true); //使用open方法，GET 相应的js脚本文件
xhr.onreadystatechange = function(){  
  //使用onreadystatechange检查readystate状态是否为4，检测http状态码是不是2XX的有效相应额，还是304缓存读取相应。
  if(xhr.readyState == 4){
    if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304){
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
    }
  }
};
xhr.send(null);