如何拥有自己的专属倒计时（html+css+JavaScript）
我们拿2021年12月25号考研来说吧，如何设置倒计时呢？
首先我们写一个div用来放倒计时在什么位置显示。
如何倒计时呢？
我们前面学过Date日期这个内置函数，我们通过获取现在到考研当天的毫秒数，然后将毫秒转化为天数、小时数、分钟数、秒数。毫秒数。这可以轻松的做到。在这里我们需要判断一下它们有几位数字，如果只有一位我想让它变成两位显示。
var date1 = new Date('2021-12-25 0:0:0');
var date2 = new Date();
var date = date1-date2;//获取现在到考研当天的毫秒数
//将毫秒转化为天数、小时数、分钟数、秒数。毫秒数
var d = parseInt(date/(1000*60*60*24));
var h = parseInt((date%(1000*60*60*24))/(1000*60*60));
var f = parseInt((date%(1000*60*60*24))%(1000*60*60)/(1000*60));
var s = parseInt((date%(1000*60*60*24))%(1000*60*60)%(1000*60)/1000);
var a = parseInt((date%(1000*60*60*24))%(1000*60*60)%(1000*60)%1000);
d = d>=10?d:'0'+d;//两位显示
那么获取之后怎么办呢？
我们可以用页面加载事件来处理这个事件，让它每一毫秒调用一次。
setTimeout(showTime, 1);//每一毫秒调用一次
window.onload = showTime();//页面加载事件调用倒计时函数
这些步骤完成之后，在美化一下页面（我在这用CSS做）。
最终结果
快来获取你的专属倒计时吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Document</title>
</head>
<style>
div{
display: block;
width: 600px;
height: 100px;
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent; /*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}
body{
background-image: url(../3.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
}
div{
width: 480px;
text-align: center;
margin: 150px auto;
font-size: 20px;
color: yellowgreen;
}
</style>
<body>
<div></div>
<script>
function showTime(){
var date1 = new Date('2021-12-25 0:0:0');
var date2 = new Date();
var date = date1-date2;
var d = parseInt(date/(1000*60*60*24));
var h = parseInt((date%(1000*60*60*24))/(1000*60*60));
var f = parseInt((date%(1000*60*60*24))%(1000*60*60)/(1000*60));
var s = parseInt((date%(1000*60*60*24))%(1000*60*60)%(1000*60)/1000);
var a = parseInt((date%(1000*60*60*24))%(1000*60*60)%(1000*60)%1000);
d = d>=10?d:'0'+d;
h=h>=10?h:'0'+h;
f=f>=10?f:'0'+f;
s=s>=10?s:'0'+s;
var str = '考研倒计时：'+d+'天'+h+'时'+f+'分'+s+'秒'+a+'毫秒';
document.querySelector('div').innerHTML=str;
setTimeout(showTime, 1);
}
window.onload = showTime();
</script>
</body>
</html>
