js模仿京东首页的倒计时功能 / 四六文摘

模仿京东首页的倒计时

我们学习了定时器，可以用定时器做一个倒计时，于是我模仿了京东首页倒计时。

先看看京东首页的倒计时。

思路：

如何倒计时？

给一个未来的时间。然后计算未来时间到现在的时间戳。
用定时器每隔一秒，计算时间戳。然后把时间戳转换为时分秒。

转换的时候，要注意取整和取余，别搞混了。
最后拿到了数据，就把数据填充到静态页面中。
填充数据的时候，判断一下，当为个位数的时候，前面补0,确保两位数字。

这是我做出来的效果

最后附上我的代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .countdown{
            width: 190px;
            height: 260px;
            margin: 0 auto;
            background: #E83632;
            background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);
        }
        .countdown .title{
            color: #fff;
            font-size: 30px;
            text-align: center;
            font-weight: bold;
            padding-top: 30px;
        }
        .countdown .desc{
            color: #fff;
            font-size: 14px;
            text-align: center;
            margin-top: 100px;
            vertical-align: middle;
        }
        .countdown .desc>strong{
            font-size: 18px;
            vertical-align: middle;
            margin-right: 8px;

        }
        .countdown .time{
            width: 80%;
            height: 30px;
            margin:0 auto;
            margin-top: 10px;
            color: #fff;
            font-size: 20px;
            margin-left: 25px;
        }
        .countdown .time>span{
            width: 30px;
            height: 30px;
            display: inline-block;
            background: #2f3430;
            margin-left: 5px;
            text-align: center;
            font-weight: bold;
            padding-top: 4px;
        }
    </style>
</head>
<body>

    <div class="countdown">
        <div class="title">京东秒杀</div>
        <div class="desc">
            <strong></strong>点倒计时
        </div>
        <div class="time">
            <span class="h"></span>
            :
            <span class="m"></span>
            :
            <span class="s"></span>
        </div>
    </div>
    <script>
        //封装为Date的内置函数
        Date.prototype.countdown = function countdown(endDate){
            if(!(endDate instanceof Date)){
                console.error('Uncaught TypeError :'+endDate+'不是Date类型');
                return undefined;
            }
            var nowDate = new Date();
            //定义cha为时间差 ,接收 现在到结束时的时间戳
            var cha = endDate.getTime() - nowDate.getTime();

            var year = parseInt(cha / (365*24*60*60*1000));

            var value = cha % (365*24*60*60*1000);

            var day = parseInt(value / (24*60*60*1000));

            var h = parseInt(value / (60*60*1000));
            value = value % (60*60*1000);

            var m = parseInt(value / (60*1000));
            value = value % (60*1000);

            var s = parseInt(value / (1000));

            var ms = parseInt(s);

            return {year,day,h,m,s,ms};
        }

        var djs = setInterval(function(){
            //设置结束时间:月份从0-11，0代表1月份，11就是12月份
            var endDate = new Date(2021,0,25,0,0,0,0);
            //匿名调用Date的自定义内置函数,传入结束的日期,返回一个对象
            var obj = new Date().countdown(endDate);
            //对返回值结果判定
            if( undefined === obj){
                clearInterval(djs);
                return;
            }
            //获取倒计时需要渲染的元素
            var end = document.querySelector('strong');
            var h = document.querySelector('.h');
            var m = document.querySelector('.m');
            var s = document.querySelector('.s');
            //时分秒为个位数时，前面补0
            if(obj.s < 10) obj.s = '0'+obj.s;
            if(obj.m < 10) obj.m = '0'+obj.m;
            if(obj.h < 10) obj.h = '0'+obj.h;
            //把数据渲染到页面
            s.innerHTML = obj.s;
            m.innerHTML = obj.m;
            h.innerHTML = obj.h;
            end.innerHTML = endDate.getHours();
            //时间到了清除定时器
            if( 0===obj.h && 0===obj.m && 0===obj.s ){
                clearInterval(djs);
            }
        },1000);

    </script>
</body>
</html>

js模仿京东首页的倒计时功能

模仿京东首页的倒计时

相关推荐