案例 -- 设计一个简单的倒计时

最新推荐文章于 2023-01-07 00:54:29 发布

JikelZhang

最新推荐文章于 2023-01-07 00:54:29 发布

阅读量296

点赞数 1

分类专栏： js有趣小案例文章标签： HTML JavaScript 倒计时时间戳页面动态更新

本文链接：https://blog.csdn.net/weixin_54902466/article/details/117884994

版权

js有趣小案例专栏收录该内容

39 篇文章 1 订阅

订阅专栏

如果你看到这是分享时间晚了,倒计时出现了负数,请修改我设置的未来时间戳即可!

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义字体 */
        @font-face {
            /* 自定义字体名称 */
            font-family: 'myfont';
            /* 链入字体文件 */
            src: url(./font/font/DS-DIGIT.TTF);
        }

        #time {
            font-size: 30px;
            color: red;
            font-family: 'myfont';
        }
    </style>
    <style>

    </style>
</head>

<body>
    <p id="time"></p>
    <script>
        function a() {
            // 毕业倒计时案例 --- 将来的时间-现在的时间 = 现在到未来指定点的时间

            // 将来的时间-现在的时间 = 现在到未来指定点的时间

            // 现在的时间 -- now 将来的时间 -- last 
            // res = (last - now) /1000  --- 1000毫秒 = 1秒

            let now = + new Date()                          // 获取现在的时间戳
            console.log(now);
            let last = +new Date("2021-11-1 00:00:00")      // 获取未来的时间戳
            console.log(last);
            res = (last - now) / 1000                       // 获取区间的时间戳
            console.log(res);
            let d = parseInt(res / 60 / 60 / 24)            // 转换获取天数
            let h = parseInt(res / 60 / 60 % 24)            // 转换获取小时
            let m = parseInt(res / 60 % 60)                 // 转换获取分钟
            let s = parseInt(res % 60)                      // 转换获取秒数
            h < 10 ? h = "0" + h : h
            m < 10 ? m = "0" + m : m
            s < 10 ? s = "0" + s : s
            let time = document.getElementById('time')      // 获取Dom节点

            time.innerText = `现在距离变帅还有${d}天-${h}时-${m}分-${s}秒`        // 打印页面

        }
        a()
        setInterval(a,1000)     // 时间是毫秒
    </script>
</body>

</html>