js倒计时天时分秒

最新推荐文章于 2023-08-09 22:13:35 发布

晚生隆海

最新推荐文章于 2023-08-09 22:13:35 发布

阅读量253

点赞数

分类专栏： web前端 # JavaScript # 小Demo 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/thlchina/article/details/129038282

版权

web前端同时被 3 个专栏收录

38 篇文章

订阅专栏

JavaScript

29 篇文章

订阅专栏

小Demo

8 篇文章

订阅专栏

效果图：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #ccc;
        }
        p {
            margin: 100px auto;
            width: 1000px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-weight: 700;
            font-size: 32px;
            background-color: skyblue;
        }
    </style>

</head>
<body>
<div>
    <p id="t"></p>
</div>
<script>
    // 倒计时函数
    function overDateTime(time) {
        let nowTime = new Date();
        let inputTime = new Date(time);
        if (inputTime - nowTime > 0) {
            let times = (inputTime - nowTime) / 1000;
            let d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            let h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            let m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            let s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            console.log(d, h, m, s)
            return d + '天' + h + '时' + m + '分' + s + '秒';
        } else {
            return '倒计时结束！';
        }

    }

    // 设置终止时间
    time = '2023-2-15 16:57:56';

    //  设置定时器1秒运行1次
    window.setInterval(function () {
        let timeDay = overDateTime(time);
        let pTime = document.getElementById('t');
        pTime.innerHTML = timeDay;
    }, 1000);


</script>

</body>
</html>