js实现倒计时（天时分秒）

最新推荐文章于 2025-02-17 09:58:45 发布

sweetllh

最新推荐文章于 2025-02-17 09:58:45 发布

阅读量2.5k

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/70474899

版权

javascript 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了如何使用JavaScript编写一个倒计时功能，涵盖了天数、小时、分钟和秒数的计算方法，详细讲解了时间转换和更新界面的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }

        div{
            width: 800px;
            height: 100px;
            line-height: 100px;
            margin: 0 auto;
            margin-top: 100px;
            color: #000;
            font-size: 26px;
        }
    </style>
</head>
<body>
      <div class="txt"></div>
</body>
<script type="text/javascript">
    //格式化时间
    function num(n){
        return n < 10 ?'0'+n :n;
    };

    //倒计时函数
    setInterval(function(){
        //当前时间
        var startTime = new Date();
        //结束时间
        var endTime =  new Date('2017/12/24 24:00:00');
        //算出中间差，以毫秒数返回.
        var countDown = (endTime.getTime()-startTime.getTime());
        //获取天数
        var oDay = parseInt(countDown/1000/60/60/24);
        //获取小时数
        var oHour = parseInt(countDown/1000/60/60%24);
        //获取分钟数
        var oMinute = parseInt(countDown/1000/60%60);
        //获取秒数
        var oSecond = parseInt(countDown/1000%60);
        //获取标签
        var txt = document.querySelector('.txt');
        //输出时间
        var t = num(oDay)+ '<span>天</span>'+num(oHour)+'<span>时</span>'+num(oMinute)+'<span>分</span>'+num(oSecond)+'<span>秒</span>';
        txt.innerHTML = t;
    },1000) ;
</script>
</html>