js实现实时倒计时效果

最新推荐文章于 2024-03-20 11:05:06 发布

<王艳明>

最新推荐文章于 2024-03-20 11:05:06 发布

阅读量268

点赞数

分类专栏： Javascript 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_33406282/article/details/115739500

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文通过一个简单的HTML和JavaScript代码示例，展示了如何在网页中创建实时倒计时的效果。代码中定义了一个名为`countDown`的函数，计算从当前时间到2022年9月27日21:00:04的剩余时间，并以天、小时、分钟和秒的形式在页面上显示。页面样式简洁，背景为黑色，文字为棕色，字体大小为50px。通过设置定时器，每秒更新倒计时显示。

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

js实现实时倒计时效果

<!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>js倒计时效果实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #count_down {
            width: 100vw;
            height: 100vh;
            line-height: 100vh;
            text-align: center;
            background-color: black;
            color: brown;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div id="count_down"></div>
    <script>
        function countDown() {
            //首先确定现在的时间和倒计时的时间,两个时间戳相减得到毫秒数转换为秒数
            let now = + new Date(), future = +new Date('2022-9-27 21:00:04'), tureTime = (future - now) / 1000
            //定义变量储存值
            let day = parseInt(tureTime / 60 / 60 / 24)
            h = parseInt(tureTime / 60 / 60 % 24)
            m = parseInt(tureTime / 60 % 60)
            s = parseInt(tureTime % 60)

            //最后输出到DOM节点上
            let div = document.getElementById('count_down')
            div.innerText = `距离倒计时还有${day}天${h}小时${m}分钟${s}秒`
        }
        countDown()
        setInterval(countDown, 1000)
    </script>
</body>

</html>

<王艳明>

关注

0
点赞
踩
0

收藏

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

<!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&g.
复制链接

扫一扫