作为一名合格的高三牲，高考就是我们现今的最大目标，那高考倒计时也肯定是少不了的，但是个人认为手写的倒计时过于古老且不智能，不能实时更新，过于麻烦，同时也受提醒，所以就有现在这个想法。而且刚换了新平台，不折腾一下说不过去
接下来就是就是寻找别人的轮子了，换个皮就是自己的【乐】，找了很久才发现一个比较好，且符合个人审美的，但是问题也比较多，就比如中间那个大框特别碍眼，而且添加背景后，只能显示局部不能拉伸全屏，这就让人很不爽
经过艰苦的修改后，将这个大框去掉，然后图片可以正常显示，还加了一个看板娘添加活力，但是有时加载不出来，效果如图且代码如下
这是作者原帖
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Countdown to NCEE</title>
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div class="container">
<h2><span>Countdown to NCEE</span> 2023</h2>
<div class="countdown">
<div id="day">NA</div>
<div id="hour">NA</div>
<div id="minute">NA</div>
<div id="second">NA</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function getEndTime(myYear){
var myEndTime = new Date(''+myYear+'/06/07 00:00:00');//更改日期
return myEndTime;
}
function countDown(){
var mydate = new Date();
var year = '2023';
var EndTime = getEndTime(year);
var NowTime = new Date();
if( (EndTime.getTime() - NowTime.getTime() ) < 0){
year = mydate.getFullYear() + 1;
EndTime = getEndTime(year);
}
var t = EndTime.getTime() - NowTime.getTime();
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);
document.getElementById('day').innerText = d;
document.getElementById('hour').innerText = h;
document.getElementById('minute').innerText = m;
document.getElementById('second').innerText = s;
}
setInterval(countDown,1000);
</script>
<!-- 看板娘管理 -->
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget
.on('*', (name) => {
console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
})
.init({
display: {
// 居左
"position": "right",
// 宽度
"width": 150,
// 高度
"height": 250,
// 距左右
"hOffset": 10,
// 距下
"vOffset": 40
},
mobile: {
// 移动端，false为关闭
"show": true,
"scale": 0.5
},
dialog: {
// 开启对话框，false为关闭
enable: true,
script: {
// 每空闲 10 秒钟，显示一条一言
'every idle 10s': '$hitokoto$',
// 当触摸到角色身体
'tap body': '哎呀！别碰我！',
// 当触摸到角色头部
'tap face': '你干嘛，哎呦。'
}
}
});
</script>
<!--由江鸟更改部分代码，修正了背景图不能全屏 -->
CSS
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body
{
background: url(../image/bg.jpg);
background-attachment: fixed;
background-blend-mode: hard-light;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container{
position: absolute;
top: 80px;
left: 100px;
right: 100px;
bottom: 80px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container h2 {
text-align: center;
font-size: 10em;
line-height: 0.7em;
color: #333;
margin-top: -80px;
}
.container h2 span{
display: block;
font-weight: 300;
letter-spacing: 6px;
font-size: 0.2em;
}
.countdown{
display: flex;
margin-top: 50px;
}
.countdown div{
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #333;
color: #fff;
margin: 0 15px;
font-size: 3em;
font-weight: 500;
}
.countdown div:before{
content: '';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 35px;
background: rgb(16, 187, 209);
color: #ffffff;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}
.container #day:before{
content: 'Days';
}
.container #hour:before{
content: 'Hours';
}
.container #minute:before{
content: 'Minutes';
}
.container #second:before{
content: 'Seconds';
}
去b站闲逛的时候又发现一个比较好看的，又是修改修改，我这里放上来，如下所示
这是作者视频
这次就不一一放出代码了，我将其打包放在网盘，需要的可以直接下载
下载帮助
这里也提供了在线链接，我做了有两个
