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

0%

截图

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
你可以通过这个网址查看到想要的镜像源服务器。

现象

认证日志/var/log/auth.log反复出现CRON信息

1
2
3
4
5
6
7
8
9
10
11
12
Aug  8 01:09:01 rpi0w CRON[15394]: pam_unix(cron:session): session opened for user root by (uid=0)
Aug 8 01:09:01 rpi0w CRON[15394]: pam_unix(cron:session): session closed for user root
Aug 8 01:17:02 rpi0w CRON[15403]: pam_unix(cron:session): session opened for user root by (uid=0)
Aug 8 01:17:02 rpi0w CRON[15403]: pam_unix(cron:session): session closed for user root
Aug 8 01:39:01 rpi0w CRON[15443]: pam_unix(cron:session): session opened for user root by (uid=0)
Aug 8 01:39:01 rpi0w CRON[15443]: pam_unix(cron:session): session closed for user root
Aug 8 02:09:01 rpi0w CRON[15477]: pam_unix(cron:session): session opened for user root by (uid=0)
Aug 8 02:09:01 rpi0w CRON[15477]: pam_unix(cron:session): session closed for user root
Aug 8 02:17:01 rpi0w CRON[15499]: pam_unix(cron:session): session opened for user root by (uid=0)
Aug 8 02:17:01 rpi0w CRON[15499]: pam_unix(cron:session): session closed for user root
Aug 8 02:39:01 rpi0w CRON[15526]: pam_unix(cron:session): session opened for user root by (uid=0)
Aug 8 02:39:01 rpi0w CRON[15526]: pam_unix(cron:session): session closed for user root

看起来是root计划任务但用crontab -l没有发现对应任务

分析

问题应该出在系统自带的周期性任务,查看以下路径

1
2
3
4
5
/etc/cron.d/
/etc/cron.daily/
/etc/cron.hourly/
/etc/cron.monthly/
/etc/cron.weekly/

确认存在系统任务,考虑清除cron的auth日志信息。

方法

使用sudo编辑/etc/pam.d/common-session-noninteractive
找到这一行

1
2
3
4
5
6
7
8
session required        pam_unix.so
# 前排添加

session [success=1 default=ignore] pam_succeed_if.so service in cron quiet use_uid
# 保存退出
# 重启 crond 服务

sudo service cron restart

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