用js实现倒计时效果

首先获得两个时间的时间戳

            var newdate = new Date('2021-01-22 21:25:00').getTime();
            var olddate = new Date().getTime();

然后相减获得相差时间的毫秒数

            var difference = newdate - olddate

计算还有多少天,多少小时,多少分,多少秒

1 　　　　　　　var day = parseInt(difference / 1000 / 60 / 60 / 24);
2             difference = difference % (1000 * 60 * 60 * 24)
3             var hours = parseInt(difference / 1000 / 60 / 60);
4             difference = difference % (1000 * 60 * 60)
5             var m = parseInt(difference / 1000 / 60);
6             difference = difference % (1000 * 60)
7             var s = parseInt(difference / 1000)

最后打印一下,就是距离目标时间的天数(精确到秒)

            console.log(day + '-' + hours + '-' + m + '-' + s);

怎么让他显示在页面上并且一直动呢,,这时候我们的定时器就登场了

首先创建一个div盒子存放所有的数字

    <div id="show"><span></span>天<span></span>小时<span></span>分<span></span>秒</div>

然后动态添加

            show[0].innerHTML = day;
            show[1].innerHTML = hours;
            show[2].innerHTML = m;
            show[3].innerHTML = s;

封装函数,并加入定时器,

完整代码来啦(直接复制粘贴到html就可以运行)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="show"><span></span>天<span></span>小时<span></span>分<span></span>秒</div>
    <script>
        var show = document.getElementById("show").getElementsByTagName("span");

        function count() {
            var newdate = new Date('2021-01-22 21:25:00').getTime();
            var olddate = new Date().getTime();
            var difference = newdate - olddate
            var day = parseInt(difference / 1000 / 60 / 60 / 24);
            difference = difference % (1000 * 60 * 60 * 24)
            var hours = parseInt(difference / 1000 / 60 / 60);
            difference = difference % (1000 * 60 * 60)
            var m = parseInt(difference / 1000 / 60);
            difference = difference % (1000 * 60)
            var s = parseInt(difference / 1000)
            show[0].innerHTML = day;
            show[1].innerHTML = hours;
            show[2].innerHTML = m;
            show[3].innerHTML = s;
            console.log(day + '-' + hours + '-' + m + '-' + s);
        };
        count();
        clearInterval(timer);
        var timer = setInterval(function () {
            count(), 1000
        })

        console.log(new Date().getTime());
        console.log(new Date('2020-01-01 12:00:00').getTime());
    </script>
</body>

</html>

 

注意:自己用的时候可以写一个简单的判断,如果 difference (相差毫秒数)小于等于零,可以show.innerHTML添加一个提示,

还有还有,我这里设置的时间比较近,因为那个时辰对我来说很重要,我很期待,过几天可能会是负数,所以我没设置提示,也是避免大家误会,你们可以在new Date('')写任何时间,如果不用当前时间可以设置每秒让秒数减一就可以,下次有空再整理啦

哦!对了,这不适用于苹果手机哦

我记得之前看到苹果手机里要用new Data(Mon Jan 11 2021 14:46:33 GMT+0800)这种模式,大家试试哦~

posted @ 2021-01-11 14:49  昶羽  阅读(559)  评论(0)    收藏  举报