js实现倒计时案例

最新推荐文章于 2023-11-14 10:56:21 发布

一只桃子~

最新推荐文章于 2023-11-14 10:56:21 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/qq_43405603/article/details/119807739

版权

本文通过一段HTML和JavaScript代码展示了如何实现一个倒计时功能，目标时间为2021年1月28日2:00:00。代码首先计算目标时间和当前时间的差值，然后转换为小时、分钟和秒，并用格式化函数处理位数不足的情况。最后，使用`setInterval`每秒更新倒计时显示。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: darkslateblue;
        }
        #time {
            height: 100px;
            line-height: 100px;
            border: 1px dashed yellow;
            text-align: center;
            color: #fff;
            font-size: 26px;
        }
    </style>
</head>
<body>
    <div id="time">
    </div>
</body>

</html>
<script>
    /* 
  倒计时：
  目标时间：2020年2月6号
  目标时间-现在的时候=还剩多少时间？
  为了方便计算时间差，我们统一转成到1970年...的时间戳

*/
    function countDown(targetStr) {
        // 目标时间
        var targetTime = new Date(targetStr);
        // 现在的时间
        var nowTime = new Date()
        // 时间差,得出来的是毫秒
        var diffTime = targetTime - nowTime;
        // 把时间差换算成时、分、秒
        var hours = Math.floor(diffTime / (1000 * 60 * 60));
        var minutes = Math.floor((diffTime - hours * 1000 * 60 * 60) / (1000 * 60));
        var seconds = Math.floor((diffTime - hours * 1000 * 60 * 60 - minutes * 60 * 1000) / 1000);

        var result = formatter(hours) + "时" + formatter(minutes) + "分" + formatter(seconds) + "秒";
        return result;

    }
    function formatter(val) {
        return val = Number(val) < 10 ? "0" + val : val;
    }
    var res = countDown("2021-01-28 2:00:00");
    time.innerHTML = res;

    setInterval(() => {
        var res = countDown("2021-01-28 2:00:00");
        time.innerHTML = res;
    }, 1000);
</script>

一只桃子~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现倒计时案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
复制链接

扫一扫