版权声明:转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/86548427
在很多购物网站中,我们都能见到倒计时类的模块,那么常用的倒计时模块是怎么靠js实现的呢?下面告诉你答案!
核心语法:date的使用;
关键思想:利用时间差来计算和换算时间;
代码如下:
<!-- 主要思想是利用date属性不断获取当前时间,利用计时器做差来动态计算先在时间与设定时间的总毫秒数 -->
<!-- 利用毫秒 秒 分 时 天 的关系,实现倒计时的功能 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>倒计时</title>
<style>
.b{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 2px solid rgba(214, 113, 113, 0.5);
background-color: rgb(124, 166, 214);
float: left;
}
</style>
</head>
<body>
<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('2019 2-30 00:00:00');//设定新的时间
// console.log(timego);
var count_times=setInterval(function(){
var localtime=new Date(); //获取当前时间
var times=timego-localtime;//times 为总毫秒差
// 对应关系:
var hao=(times%1000);//总毫秒数和1000取余,为当前剩余毫秒数
var sec=parseInt(times/1000);//取出总秒数,方便计算
var sescth=(sec%60);//秒数和60取余为当前的秒数
var min=parseInt((sec/60))%60;
//分钟数为取余过后的秒数取余 也就是说要消除之前的影响
var hour=parseInt((sec/3600))%24;//时
var days=parseInt((sec/86400))%365;//天
b[0].innerHTML=days+'天';
b[1].innerHTML=hour+'时';
b[2].innerHTML=min+'分';
b[3].innerHTML=sescth+'秒';
// 分别给每个块的内容赋值
// 注意毫秒处bug 0~9需+‘00’ 10~99 需+‘0’;
var res='';
if(hao<10){
res='00'+hao;
}
else if(hao>=10&&hao<100){
res='0'+hao;
}
else{
res=hao;
}
b[4].innerHTML=res+'毫秒';
},1)
</script>
</body>
</html>
实现效果: