倒计时效果完整代码详细解析

最新推荐文章于 2024-04-13 16:57:13 发布

bsf000000___

最新推荐文章于 2024-04-13 16:57:13 发布

阅读量965

点赞数

文章标签： html5 前端 html css javascript

本文链接：https://blog.csdn.net/bsf000000___/article/details/131969335

版权

倒计时效果完整代码详细解析

这段代码是一个简单的倒计时效果示例，它使用了JavaScript和HTML来实现。

在HTML部分，定义了一个 <div> 元素，内部包含三个 <span> 元素，分别用于显示小时、分钟和秒数的倒计时。这些 <span> 元素都有相应的类名，方便通过 querySelector 方法获取到对应的元素。

在JavaScript部分，通过监听 window 对象的 load 事件，等页面加载完毕后执行回调函数。在回调函数中，先使用 querySelector 方法获取到小时、分钟和秒数的 <span> 元素，并将其存储在相应的变量中。

然后，通过将用户输入的时间（2023年7月28日01:00:00）转换为毫秒数（+new Date('2023-7-28 01:00:00')），计算剩余时间的毫秒数（times = (inputTime - nowTime) / 1000）。

接下来，将剩余时间的毫秒数转换为小时、分钟和秒数，并将结果显示在对应的 <span> 元素上。

最后，使用 setInterval 方法每隔一秒钟调用一次 countDown 函数，实现实时更新倒计时效果。

请注意，这只是一个前端倒计时的简单示例，实际应用中可能需要考虑更多的场景和逻辑。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 100px;
        }

        span {
            font-size: 2em;
            background-color: black;
            color: white;
            margin-right: 20px;
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('load', function () {
            var hour = document.querySelector('.hour')
            var minute = document.querySelector('.minute')
            var second = document.querySelector('.second')
            var inputTime = +new Date('2023-7-28 01:00:00')//返回的是用户输入时间总的毫秒数
            countDown()//我们先调用一次这个函数，防止第一次刷新页面有空白
            //开启定时器
            setInterval(countDown, 1000)
            function countDown() {
                var nowTime = +new Date()//返回的是当前时间的总的毫秒数
                var times = (inputTime - nowTime) / 1000 //times是剩余时间总的毫秒数
                var hours = parseInt(times / 60 / 60 % 24)
                hours = hours < 10 ? '0' + hours : hours
                hour.innerText = hours
                var minutes = parseInt(times / 60 % 60)
                minutes = minutes < 10 ? '0' + minutes : minutes
                minute.innerText = minutes
                var seconds = parseInt(times % 60)
                seconds = seconds < 10 ? '0' + seconds : seconds
                second.innerText = seconds
            }
        })
        
    </script>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>

</body>

</html>

bsf000000___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
倒计时效果完整代码详细解析

这段代码是一个简单的倒计时效果示例，它使用了JavaScript和HTML来实现。然后，通过将用户输入的时间（2023年7月28日01:00:00）转换为毫秒数（请注意，这只是一个前端倒计时的简单示例，实际应用中可能需要考虑更多的场景和逻辑。接下来，将剩余时间的毫秒数转换为小时、分钟和秒数，并将结果显示在对应的。元素，分别用于显示小时、分钟和秒数的倒计时。元素，并将其存储在相应的变量中。//返回的是用户输入时间总的毫秒数。//返回的是当前时间的总的毫秒数。），计算剩余时间的毫秒数（方法获取到对应的元素。
复制链接

扫一扫