倒计时效果展示图
全部代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.b {
width: 80px;
height: 100px;
border: 1px solid silver;
float: left;
margin: 10px 10px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<script>
var b = document.getElementsByClassName("b");
//定义一个固定时间
var timego = new Date("2020 4-26 00:00:00");
var timenow = setInterval(function () {
//获取当前时间
var localtime = new Date();
/*getTime() 获取当前时间到1970总毫秒数*/
var timeres = timego.getTime() - localtime.getTime();
var sec = parseInt(timeres / 1000); //总秒数
var secth = sec % 60; //秒
var minth = parseInt(sec / 60) % 60; //分
var houth = parseInt(sec / 3600) % 24; //小时
var datth = parseInt(sec / (3600 * 24)) % 31; //天
var month = parseInt(sec / (3600 * 24 * 31)) % 12; //月
var yeath = parseInt(sec / (3600 * 24 * 31 * 12)) % 100;//年
b[0].innerHTML = yeath + "年";
b[1].innerHTML = month + "月";
b[2].innerHTML = datth + "日";
b[3].innerHTML = houth + "时";
b[4].innerHTML = minth + "分";
b[5].innerHTML = secth + "秒";
var hao = (timeres % 1000);
var res = "";
/* if (hao < 10) {
res = "00" + hao;
}
else if (hao > 10 && hao < 100) {
res = "0" + hao;
}
else{
res=hao;
}*/
res=(hao<10?"00"+hao:hao>10&&hao<100?"0"+hao:hao);
b[6].innerHTML =res+"毫秒";
}, 1)
</script>
</body>
</html>