仿京东秒杀倒计时

仿京东秒杀倒计时

html代码

<div id="box">
        <div class="txt">秒杀倒计时</div>
        <div class="hour"></div>
        <!-- 小时与分钟之间的冒号 -->
        <span class="h_m">:</span>
        <div class="minute"></div>
        <!-- 分钟与秒之间的冒号 -->
        <span class="m_s">:</span>
        <div class="second"></div>
    </div>

css样式代码

 *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height:300px;
            margin: 200px 200px;
            background: red;
            position: relative;
        }
        .txt{
            width: 150px;
            height:50px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 30px;
            font-weight: 900;
            position: absolute;
            left: 25px;
            top: 50px;

        }
        .hour{
            left: 20px;
        }
        .h_m{
            left: 68px;
        }
        .minute{
            left: 80px;
        }
        .m_s{
            right: 68px;
        }
        .second{
            left: 140px;
            
        }
        .hour,.minute,.second{
            position: absolute;
            top:200px;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            width: 40px;
            height: 40px;
            background: black;
        }
        .h_m, .m_s{
            color: #fff;
            font-size: 20px;
            font-weight: 900;
            position: absolute;
            bottom: 70px;
        }

js调用函数倒计时代码

  //1、获取元素
        var hour=document.querySelector('.hour');
        var minute=document.querySelector('.minute');
        var second=document.querySelector('.second');
        var inputTime=+new Date('2020-3-11 20:00:00');//倒计时的结束时间，自己设置时间
        countDown();//先调用一次这个函数 防止第一次刷新页面有空白
        //2、开启定时器
        setInterval(countDown,1000);//1000毫秒，每一秒钟调用一次函数
        //3、倒计时-时分秒函数
        function countDown(){
            var nowTime=+new Date(); //返回的是当前时间的总的毫秒数
            var times=(inputTime-nowTime)/1000; // times是剩余时间的总的毫秒数
            var h=parseInt(times/60/60%24);
            h=h<10?'0'+h:h;//判断数值小于10的情况  如 0-9改为 00-09
            hour.innerHTML=h;//更改div里面的内容 把h给获取元素hour的内容
            var m=parseInt(times/60%60);
            m=m<10?'0'+m:m;
            minute.innerHTML=m;//同上
            var s=parseInt(times%60);
            s=s<10?'0'+s:s;
            second.innerHTML=s;//同上
        }

效果图

最后代码过程就不过多讲解，比较简单易写，如需改进的地方，请评论再改进，谢谢