日星网

CSS创建简单的Material Design风格输入框。

发表于 2022年05月06日分类于 HTML/CSS

代码

<!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镜像服务器列表

发表于 2022年04月26日分类于 Ubuntu

Ubuntu镜像源服务器列表

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

【镜像源】2021阿里云镜像源列表（Ubuntu 22.04）

发表于 2022年04月26日分类于 Ubuntu

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动态添加脚本文件

发表于 2021年12月03日分类于 JS,jQuery

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

利用自定义函数加载

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脚本注入

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);