代码收藏（三）JavaScript 倒计时

最新推荐文章于 2024-05-07 16:45:26 发布

370370370370370

最新推荐文章于 2024-05-07 16:45:26 发布

阅读量93

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_36486067/article/details/105922040

版权

代码收藏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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="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>
</html>

370370370370370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
代码收藏（三）JavaScript 倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
复制链接

扫一扫