根据域名展示对应备案号内容的共用站点默认页面
介于个人技术能力很渣，部分内容来源于网络，此文仅做记录和参考；
一、背影
因技术能力很渣，又想在多域名时共用一个单页面配置显示不同的备案号相关信息进行兜底使用，以方便部署和转移；
PS：之前弄的觉得单调，又从网上找了些时间显示和部分动效的展示加到里面；
二、HTML源码
<html>
<head lang="zh">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
.v-align {
margin: 0 auto;
width: 100%;
height: 15%;
text-align: center;
line-height: 15%;
border: 0px solid;
}
.valign {
margin: 0 auto;
width: 100%;
height: 71%;
text-align: center;
line-height: 70%;
border: 0px solid;
}
.footer {
/* position: fixed; */
width: 100%;
/* height: 10%; */
bottom: 3%;
font-size: 0.1em;
color: #9d9d9d;
text-align: center;
line-height: 10%;
border: 0px solid;
}
/*鼠标样式动画*/
body{
background-repeat: repeat;
background-attachment: fixed;
background-size:cover;
cursor: url(https://files.cnblogs.com/files/monster-jian/cursor.ico),auto;
}
</style>
<body>
<br>
<br>
<div class="v-align">
<br>
<br>
<br>
<br>
<p>欢迎您！</p>
</div>
<br>
<br>
<br>
<div class="valign">
<h1>站点正在努力建设中...</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!--时间展示-->
<div style="text-align: center;font-size:0.8rem;color: #571B7E;">当前时间：<time id="top_time"></time></div>
</div>
</body>
<footer>
<script type="text/javascript">
let domain = document.domain;//先获取当前访问的全域名
// let res=domain.match('.'); // 判断是否包含特定字符
// console.log(res)
// let len=res.length; // 判断包含的字符长度
// console.log(len)
// let domain2 = domain.substring(domain.indexOf('.') + 1);//截取第一个点的位置来获取根域名,这样只能获取二级域名的根域名，如果直接是不带www的域名访问，那么就会直接获取域名的后缀
// console.log(domain2)
if (domain.match('xxx.cn')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;\'> <a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>XICP备xxxxxx号-1</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxx\' target=\'_blank\'>X公网安备xxxxx号</a><span> | </span>©2015-2022</div>");
}
if (domain.match('xxx.cn')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;\'> <a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>XICP备xxxxxx号-2</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxx\' target=\'_blank\'>X公网安备xxxxx号</a><span> | </span>©2015-2022</div>");
}
if (domain.match('xxx.com')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;\'> <a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>XICP备xxxxxx号-3</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxx\' target=\'_blank\'>X公网安备xxxxx号</a><span> | </span>©2015-2022</div>");
}
if (domain.match('xxx.cn')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;\'> <a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>XICP备xxxxxx号-4</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxx\' target=\'_blank\'>X公网安备xxxxx号</a><span> | </span>©2015-2022</div>");
}
</script>
</footer>
<!--时间开始-->
<script language="javascript">
function getCurDate() {
let d = new Date();
let week;
switch(d.getDay()) {
case 1:week = "星期一";break;
case 2:week = "星期二";break;
case 3:week = "星期三";break;
case 4:week = "星期四";break;
case 5:week = "星期五";break;
case 6:week = "星期六";break;
default:week = "星期日";
}
let years = d.getFullYear();
let month = add_zero(d.getMonth() + 1);
let days = add_zero(d.getDate());
let hours = add_zero(d.getHours());
let minutes = add_zero(d.getMinutes());
let seconds = add_zero(d.getSeconds());
let ndate = years + "年" + month + "月" + days + "日" + " " + hours + ":" + minutes + ":" + seconds + " " + week;
let divT = document.getElementById("top_time");
divT.innerHTML = ndate;
}
function add_zero(temp) {
if(temp < 10) return "0" + temp;
else return temp;
}
setInterval("getCurDate()", 100);
</script>
<!--时间结束-->
<!--看板娘开始-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "right", //看板娘的表现位置
"width": 100, //小萝莉的宽度
"height": 120, //小萝莉的高度
"hOffset":10,
"vOffset": 15
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!--看板娘结束-->
<!--社会核心价值观特效开始-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="/static/base/js/123sh.js"></script>-->
<script type="text/javascript">
/* 鼠标点击特效 - 7Core.CN */
let a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {let a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");let $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;let x = e.pageX,y = e.pageY;$i.css({"z-index": 100000000,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});$("body").append($i);$i.animate({"top": y - 800,"opacity": 0},3500,function() {$i.remove();});});});
</script>
<!--社会核心价值观特效结束-->
<!-- 悬浮窗样式开始 -->
<style type="text/css">
*{margin:0px; padding:0px; }
#NavTop{
width:90px;
height:270px;
margin-top:50px;
position:fixed;
left:0;top:30%; /*固定位置,右浮动，距上150px*/
/*right:0;top:30%; !*固定位置,右浮动，距上150px*!*/
}
#NavTop #NavCon{
/*width:140px;*/
/*height:270px;*/
/*background:url('#') repeat-y;*/
/*position:relative;*/
/*border:1px solid black;*/
}
#NavTop #NavCon img.banner{
position:absolute;
left:25px;
top:-40px;
}
#NavTop #NavCon ul{
margin-top:40px;
}
#NavTop #NavCon ul li a{
text-decoration:none;
color:#fff;
width:80px;
height:25px;
background:#555;
display:block;
margin-top:3px;
margin-left:3px;
line-height:25px;
text-align:center;
font-family:"微软雅黑";
font-size:12.8px;
border-radius: 5px;
}
#NavTop #NavCon ul li a:hover{
background:#cc0066;
}
#NavTop #NavCon img.bottom{
margin-top:15px;
}
</style>
<!-- 悬浮窗样式结束 -->
<!-- 线条背景动画开始 -->
<script type="text/javascript">
!function () {
//封装方法，压缩之后减少文件大小
function get_attribute(node, attr, default_value) {
return node.getAttribute(attr) || default_value;
}
//封装方法，压缩之后减少文件大小
function get_by_tagname(name) {
return document.getElementsByTagName(name);
}
//获取配置参数
function get_config_option() {
var scripts = get_by_tagname("script"),
script_len = scripts.length,
script = scripts[script_len - 1]; //当前加载的script
return {
l: script_len, //长度，用于生成id用
z: get_attribute(script, "zIndex", -1), //z-index
o: get_attribute(script, "opacity", 0.8), //opacity
c: get_attribute(script, "color", "255,255,255"), //color
n: get_attribute(script, "count", 350) //count
};
}
//设置canvas的高宽
function set_canvas_size() {
canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
//绘制过程
function draw_canvas() {
context.clearRect(0, 0, canvas_width, canvas_height);
//随机的线条和当前位置联合数组
var e, i, d, x_dist, y_dist, dist; //临时节点
//遍历处理每一个点
random_points.forEach(function (r, idx) {
r.x += r.xa,
r.y += r.ya, //移动
r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
//从下一个点开始
for (i = idx + 1; i < all_array.length; i++) {
e = all_array[i];
// 当前点存在
if (null !== e.x && null !== e.y) {
x_dist = r.x - e.x; //x轴距离 l
y_dist = r.y - e.y; //y轴距离 n
dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
d = (e.max - dist) / e.max,
context.beginPath(),
context.lineWidth = d / 2,
context.strokeStyle = "#000000",
context.moveTo(r.x, r.y),
context.lineTo(e.x, e.y),
context.stroke());
}
}
}), frame_func(draw_canvas);
}
//创建画布，并添加到body中
var the_canvas = document.createElement("canvas"), //画布
config = get_config_option(), //配置
canvas_id = "c_n" + config.l, //canvas id
context = the_canvas.getContext("2d"), canvas_width, canvas_height,
frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
window.setTimeout(func, 1000 / 40);
}, random = Math.random,
current_point = {
x: null, //当前鼠标x
y: null, //当前鼠标y
max: 20000 // 圈半径的平方
},
all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
get_by_tagname("body")[0].appendChild(the_canvas);
//初始化画布大小
set_canvas_size();
window.onresize = set_canvas_size;
//当时鼠标位置存储，离开的时候，释放当前位置信息
window.onmousemove = function (e) {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
}, window.onmouseout = function () {
current_point.x = null;
current_point.y = null;
};
//随机生成config.n条线位置信息
for (var random_points = [], i = 0; config.n > i; i++) {
var x = random() * canvas_width, //随机位置
y = random() * canvas_height,
xa = 2 * random() - 1, //随机运动方向
ya = 2 * random() - 1;
// 随机点
random_points.push({
x: x,
y: y,
xa: xa,
ya: ya,
max: 1000 //沾附距离
});
}
all_array = random_points.concat([current_point]);
//0.1秒后绘制
setTimeout(function () {
draw_canvas();
}, 100);
}();
</script>
<!-- 线条背景动画结束 -->
</html>
1、新版页面（增加了黑白和记录时间）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="学习了TDK三大标签，记录一下。个人学习及展示相关域名站点，学习记录，仅此为止；xxxxxx.cn,xxxxxx.cn,xxxxxx.com,xxxxxx.cn,xxxxxx.cn,xxxxxx.cn 相关都是xxxxxx。"/>
<meta name="keywords" content="xxxxxx.cn,xxxxxx.cn,xxxxxx.com,xxxxxx.cn,xxxxxx.cn,xxxxxx.cn,SEO个人站点,xxxxxx,xxxxxx,xxxxxx,xxxxxx,xxxxxx"/>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
//设置canvas的高宽
function set_canvas_size() {
canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
/*鼠标样式动画*/
body{
height: 75%;
width: 100%;
transition: all 2s;
background-repeat: repeat;
background-attachment: fixed;
background-size:cover;
cursor: url(https://files.cnblogs.com/files/monster-jian/cursor.ico),auto;
}
.footer {
margin-top: 85%
bottom: 3%;
font-size: 0.9em;
color: #9d9d9d;
text-align: center;
line-height: 10%;
border: 0px solid;
}
.kaiguan{
position: absolute;
top: 15px;
right: 15px;
width: 28px;
height: 21px;
border: 2px solid black;
border-radius: 25px;
cursor: pointer;
transition: all 1.5s;
font-size:0.5rem;
}
.bai{
position: absolute;
top: 1.5px;
left: 2px;
height: 13px;
width: 13px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
transition: all 1.5s;
}
.hei{
position: absolute;
top: 1.5px;
right: 2px;
height: 13px;
width: 13px;
background-color: rgb(11, 243, 81);
border-radius: 50%;
transition: all 1.5s;
}
.px0001{
margin-top: 5%;
width: 100%;
text-align-last:center;
}
.h2x0001{
margin-top: 5%;
height: 10%;
width: 100%;
border-radius: 50%;
text-align: center;
}
.times{
// position: absolute;
margin-top: 18px;
margin-right: 25px;
height: 33px;
border-radius: 50%;
// text-align: center;
text-align: right;
font-size:0.5rem;
}
.runtimes{
position: fixed;
bottom: 10px;
width: 90%;
height: 80px;
z-index: 9999;
font-size: small;
left:0;
right:0;
bottom:0;
margin:auto;
text-align: center;
font-size:0.3rem;
color: #8BB381;
}
.footer{
position: fixed;
bottom: 0px;
width: 90%;
height: 30pt;
z-index: 9999;
font-size: small;
left:0;
right:0;
bottom:0;
margin:auto;
}
.footerRight{
float:right;
}
.footerLeft{
float:left;
}
</style>
</head>
<body id="body" >
<div class="kaiguan">
<div class="bai" id="anniu"></div>
</div>
<!--时间展示-->
<div class="times">现在时间：<time id="new_time" class="times"></time></div>
<p class="px0001">
欢迎您！
</p>
<h1 class="h2x0001">网站正在努力建设中...</h1>
<p class="runtimes"><span id="runtime_span"></span></p>
</div>
<footer class="footer" id="footer">
<script type="text/javascript">
let domain = document.domain;//先获取当前访问的全域名
// let res=domain.match('.'); // 判断是否包含特定字符
// console.log(res)
// let len=res.length; // 判断包含的字符长度
// console.log(len)
// let domain2 = domain.substring(domain.indexOf('.') + 1);//截取第一个点的位置来获取根域名,这样只能获取二级域名的根域名，如果直接是不带www的域名访问，那么就会直接获取域名的后缀
// console.log(domain2)
if (domain.match('xxxxxx.cn')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;text-align: center;\'> <a href=\'http://tangkaiyue.cn/\' style=\'text-decoration: none;color: #9d9d9d;\'>xxxxxx</a> <span> | </span><a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>xxICP备xxxxxx号-1</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxxxxxxx\' target=\'_blank\'>xx公网安备xxxxxxxxxxxx号</a><span> | </span>©2015-2023</div>");
}
if (domain.match('xxxxxx.com')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;text-align: center;\'> <a href=\'http://gcosy.cn/\' style=\'text-decoration: none;color: #9d9d9d;\'>xxxxxx</a> <span> | </span><a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>xxICP备xxxxxx号-3</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxxxxxxx\' target=\'_blank\'>xx公网安备xxxxxxxxxxxx号</a><span> | </span>©2020-2023</div>");
}
if (domain.match('xxxxxx.cn')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;text-align: center;\'> <a href=\'http://gcosy.cn/\' style=\'text-decoration: none;color: #9d9d9d;\'>xxxxxx</a> <span> | </span><a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>xxICP备xxxxxx号-5</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxxxxxxx\' target=\'_blank\'>xx公网安备xxxxxx号</a><span> | </span>©2021-2023</div>");
}
if (domain.match('xxxxxx.cn')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;text-align: center;\'> <a href=\'http://cqtky.cn/\' style=\'text-decoration: none;color: #9d9d9d;\'>xxxxxx</a> <span> | </span><a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>xxICP备xxxxxx号-6</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxxxxxxx\' target=\'_blank\'>xx公网安备xxxxxxxxxxxx号</a><span> | </span >©2022-2023</div>");
}
if (domain.match('xxxxxx.cn')) {
document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;text-align: center;\'> <a href=\'http://iiill.cn/\' style=\'text-decoration: none;color: #9d9d9d;\'>xxxxxx</a> <span> | </span><a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>xxICP备xxxxxx号-7</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxxxxxxx\' target=\'_blank\'>xx公网安备xxxxxxxxxxxx号</a><span> | </span>©2015-2023</div>");
}
// else {
// document.writeln("<div class=\'footer\' style=\'text-decoration: none;color: #9d9d9d;font-size: 0.5rem;text-align: center;\'> <a href=\'http://xxxxxx.cn/\' style=\'text-decoration: none;color: #9d9d9d;\'>xxxxxx</a> <span> | </span><a href=\'https://beian.miit.gov.cn/\' target=\'_blank\' style=\'text-decoration: none;color: #9d9d9d;\'>ICP备xxxxxxxx号</a><span> | </span><a style=\'text-decoration: none;color: #9d9d9d;bottom: 20px;\' href=\'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxxxxx\' target=\'_blank\'>公网安备xxxxxxxx号</a><span> | </span>©2022</div>");
//}
var oHeight = $(document).height(); //屏幕当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
console.log("hidden");
$("#footer").attr("hidden","hidden");
}else{
console.log("remove--hidden");
$("#footer").removeAttr("hidden");
}
});
</script>
</footer>
</body>
<!--时间开始-->
<script language="javascript">
function getCurDate() {
let d = new Date();
let week;
switch(d.getDay()) {
case 1:week = "星期一";break;
case 2:week = "星期二";break;
case 3:week = "星期三";break;
case 4:week = "星期四";break;
case 5:week = "星期五";break;
case 6:week = "星期六";break;
default:week = "星期日";
}
let years = d.getFullYear();
let month = add_zero(d.getMonth() + 1);
let days = add_zero(d.getDate());
let hours = add_zero(d.getHours());
let minutes = add_zero(d.getMinutes());
let seconds = add_zero(d.getSeconds());
let ndate = years + "年" + month + "月" + days + "日" + " " + hours + ":" + minutes + ":" + seconds + " " + week;
let divT = document.getElementById("new_time");
divT.innerHTML = ndate;
}
function add_zero(temp) {
if(temp < 10) return "0" + temp;
else return temp;
}
setInterval("getCurDate()", 100);
</script>
<!--时间结束-->
<!--看板娘开始-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "right", //看板娘的表现位置
"width": 50, //小萝莉的宽度
"height": 65, //小萝莉的高度
"hOffset": 10,
"vOffset": 15
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!--看板娘结束-->
<!--社会核心价值观特效开始-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="/static/base/js/123sh.js"></script>-->
<script type="text/javascript">
/* 鼠标点击特效 - 7Core.CN */
let a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {let a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");let $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;let x = e.pageX,y = e.pageY;$i.css({"z-index": 100000000,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});$("body").append($i);$i.animate({"top": y - 800,"opacity": 0},3500,function() {$i.remove();});});});
</script>
<!--社会核心价值观特效结束-->
<!-- 线条背景动画开始 -->
<script type="text/javascript">
!function () {
//封装方法，压缩之后减少文件大小
function get_attribute(node, attr, default_value) {
return node.getAttribute(attr) || default_value;
}
//封装方法，压缩之后减少文件大小
function get_by_tagname(name) {
return document.getElementsByTagName(name);
}
//获取配置参数
function get_config_option() {
let scripts = get_by_tagname("script"),
script_len = scripts.length,
script = scripts[script_len - 1]; //当前加载的script
return {
l: script_len, //长度，用于生成id用
z: get_attribute(script, "zIndex", -1), //z-index
o: get_attribute(script, "opacity", 0.5), //opacity
c: get_attribute(script, "color", "#000080"), //color
n: get_attribute(script, "count", 350) //count
};
}
//设置canvas的高宽
function set_canvas_size() {
canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
//绘制过程
function draw_canvas() {
context.clearRect(0, 0, canvas_width, canvas_height);
//随机的线条和当前位置联合数组
let e, i, d, x_dist, y_dist, dist; //临时节点
//遍历处理每一个点
random_points.forEach(function (r, idx) {
r.x += r.xa,
r.y += r.ya, //移动
r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
//从下一个点开始
for (i = idx + 1; i < all_array.length; i++) {
e = all_array[i];
// 当前点存在
if (null !== e.x && null !== e.y) {
x_dist = r.x - e.x; //x轴距离 l
y_dist = r.y - e.y; //y轴距离 n
dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
d = (e.max - dist) / e.max,
context.beginPath(),
context.lineWidth = d / 2,
context.strokeStyle = "#9d9d9d",
context.moveTo(r.x, r.y),
context.lineTo(e.x, e.y),
context.stroke());
}
}
}), frame_func(draw_canvas);
}
//创建画布，并添加到body中
let the_canvas = document.createElement("canvas"), //画布
config = get_config_option(), //配置
canvas_id = "c_n" + config.l, //canvas id
context = the_canvas.getContext("2d"), canvas_width, canvas_height,
frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
window.setTimeout(func, 1000 / 40);
}, random = Math.random,
current_point = {
x: null, //当前鼠标x
y: null, //当前鼠标y
max: 8500 // 圈半径的平方
},
all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
get_by_tagname("body")[0].appendChild(the_canvas);
//初始化画布大小
set_canvas_size();
window.onresize = set_canvas_size;
//当时鼠标位置存储，离开的时候，释放当前位置信息
window.onmousemove = function (e) {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
}, window.onmouseout = function () {
current_point.x = null;
current_point.y = null;
};
//随机生成config.n条线位置信息
for (var random_points = [], i = 0; config.n > i; i++) {
var x = random() * canvas_width, //随机位置
y = random() * canvas_height,
xa = 2 * random() - 1, //随机运动方向
ya = 2 * random() - 1;
// 随机点
random_points.push({
x: x,
y: y,
xa: xa,
ya: ya,
max: 700 //沾附距离
});
}
all_array = random_points.concat([current_point]);
//0.1秒后绘制
setTimeout(function () {
draw_canvas();
}, 100);
}();
</script>
<!-- 线条背景动画结束 -->
<!-- 黑白开关开始 -->
<script>
var anniu =document.getElementById('anniu');
var kaiguan = document.querySelector('.kaiguan');
var body = document.getElementById('body');
var temp = 1;
anniu.addEventListener('click',function(){
if(temp==1){
this.className = 'hei';
temp=0;
kaiguan.style.border= '2px solid rgb(11, 243, 81)';
body.style.backgroundColor= 'rgb(7, 7, 29)';
body.style.color = 'white';
}else{
this.className = 'bai';
temp=1;
kaiguan.style.border= '2px solid black';
body.style.backgroundColor= 'white';
body.style.color = 'black';
}
})
</script>
<!-- 黑白开关结束 -->
<!-- 时间长计算开始 -->
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("01/05/2023 15:22:00");
// X = new Date("01/09/2023 15:20:00");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "距最后1次调整已过去：" + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();
</script>
<!-- 时间长计算结束 -->
</html>
三、预览图
1.0版预览图
1.1版预览图
1.1版预览图-黑
1.1版预览图-白
四、使用
1、复制文章代码内容
2、新建一个文本文件或者html文件
3、放入代码内容
4、另存为html格式的文件或者直接改后缀名为html
5、打开html文件查看
五、Nginx代理部署
1、配置一个通用监听80/443的（不需要指定域名等）
2、代理文件到静态页面，指向要兜底的这个文件；
3、设置好了重启一下Nginx；
4、访问对应域名试试；
其他
仅做记录参考，不喜勿喷哈；
版本历史
| 版本 | 更新时间 | 变更内容 | 其他 | 备注 |
|---|---|---|---|---|
| V1.0 | 2022111816 | 新增文档 | - | - |
| V1.1 | 2023011216 | 增加新内容 | - | - |
1262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
