js倒计时案例

在很多购物网站中，我们都能见到倒计时类的模块，那么常用的倒计时模块是怎么靠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>

实现效果：

猜你喜欢