欢迎光临
我们一直在努力

JavaScript | 时间戳实现倒计时定时器

实现思路:通过date.setHours设置三小时后,并通过data.getTime获取三小时后的时间戳(从1970年1月1日到现在的毫秒数),之后通过定时器每隔16毫秒调用一次enterFrame函数,此函数用于设置新的时间戳(当前时间),并和三小时后的时间戳相减获取相差毫秒数,最后转换为小时、分钟、秒。

注意,最后记得通过判断清除定时器。

<body>
    <div id="times"></div>
    <script>
        var targetTime,times,ids;
        init();
        function init(){
            times=document.getElementById("times");
            var date=new Date();
            // 设置时间3小时后
            date.setHours(date.getHours()+3);
            // 获取这个时间的毫秒数,未来的时间戳,这个时间到1970.1.1的毫秒数
            targetTime=date.getTime();
            // 每16毫秒执行下面的函数
           ids=setInterval(enterFrame,16);
        }

        function enterFrame(){
            // 每间隔16毫秒执行这个函数
            // 重新获取当前的时间
            var date=new Date();
            // 重新获取当前时间戳 现在到1970.1.1的毫秒数
            var time=date.getTime();
            // console.log(targetTime-time);//10795679 毫秒
            // 用未来到1970.1.1的毫秒数-现在到1970.1.1的毫秒数,这个就是现在到未来的时间差毫秒数
            // 这是毫秒变成秒数,就要/1000,做四舍五入,进到秒
            time=Math.round((targetTime-time)/1000);
            // 10796 秒  1小时3600秒
                  // 1小时是3600秒  除3600向下取整就是小时数
            var hours=Math.floor(time/3600);
    //     1小时3600毫秒,除3600取余数,就是除了小时之外的所有秒数,除60是分钟
            var minutes=Math.floor((time%3600)/60);
            // 用当前秒-小时所用的秒-分所用的秒,就是剩余的秒数
            var seconds=time-hours*3600-minutes*60;
            times.innerHTML=(hours<10 ? "0"+hours : hours)+":"+
            (minutes<10 ? "0"+minutes : minutes)+":"+
            (seconds<10 ? "0"+seconds : seconds);
            if(hours+minutes+seconds===0){
                clearInterval(ids);
            }
        }
    </script>
</body>
赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | 时间戳实现倒计时定时器
分享到: 更多 (0)

评论 1

6 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1
    散人研

    其实想做一个简单的定时器,如2小时,直接设置变量等于2*60*60就可以获取秒数了,然后设置定时器每秒执行一次减一操作 ,对应转换时间也减去一秒就能实现了。不过这个例子可以让我们更好的了解时间戳,所以还是建议动手实践一下!

    散人研 8个月前 (03-30) 来自天朝的朋友 回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏