js倒计时案例

布满荆棘的人生 2022-03-25 06:30 212阅读 0赞

> 在很多购物网站中，我们都能见到倒计时类的模块，那么常用的倒计时模块是怎么靠js实现的呢？下面告诉你答案！

核心语法：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>

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220325/c6a1012a5d5444a4a8c5b24cfeb3c9af.png