js倒计时代码最简单的,js中倒计时器怎么实现

最新推荐文章于 2024-09-08 06:15:00 发布

阳阳2013哈哈

最新推荐文章于 2024-09-08 06:15:00 发布

阅读量336

点赞数

文章标签： java

本文链接：https://blog.csdn.net/mynote/article/details/134403741

版权

本文详细介绍了如何使用JavaScript实现倒计时功能，包括主要思路、CSS样式设置、HTML结构以及JavaScript代码的编写，通过实例展示了从获取当前时间到设定结束时间，再到动态更新显示剩余时间的完整过程。

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

大家好，小编来为大家解答以下问题，js倒计时三种简单实现方式，js倒计时代码最简单的，现在让我们一起来看看吧！

一、主要思路

1.通过内置时间函数实例化日期对象获取当前时间 new Date。

2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式python for语句用法。

3.最后把所获得的内容赋值给定义的变量。

二、css样式

主要为了内容在页面展示美观，稍微美化一下。

<style>
        p{
            font-size: 36px;
            margin: 0 auto;
            text-align: center;
            line-height: 500px;
        }
        span{
            color: red;
        }
    </style>

三、html代码

定义一个默认格式为JavaScript引入定义变量。

<p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>

四、js内容

1.首先获取html里面的spans里的全部标签用querySelectorAll获取。

2.用endTime标签定义结束时间，并给结束时间赋值。

3.同理，用newTine标签定义结束标签。

4.定义diffTime用来取结束时间减去现在时间获取的毫秒。

5.getTime标签主要用来将获取的时间转化为毫秒形式。

6.除以1000是提前将毫秒转化为秒。

       var spans = document.querySelectorAll('span');
       var endTime = new Date ('2022-10-1 12:00:00').getTime();
       var newTime = new Date ().getTime();
       var diffTime = (endTime-newTime)/1000;

1.定义day,hour,min,sen用来定义倒计时的天、时、分、秒。

2.parseInt用来将得到的值转化为整数形式。

3.用得到的秒/60得到多少分再/60得到多少时再/24得到多少天。

4.hour/60/60%24：用所得的时间把大数除以24取余得到还要多少小时，分，秒同理。

       var day = parseInt(diffTime/60/60/24);
       var hour = parseInt(diffTime/60/60%24);
       var min = parseInt(diffTime/60%60);
       var sen = parseInt(diffTime%60);

将所得到的天、时、分、秒通过innerText方式给之前定义span标签赋值。

       spans[0].innerText = day;
       spans[1].innerText = honur;
       spans[2].innerText = min;
       spans[3].innerText = sen;

最后将整个JavaScript中的内容定义一个函数中，在定时器中调用整个函数实现倒计时的效果。

showTime是我定义的函数名，1000代表1000毫米循环一次函数。

setInterval(showTime,1000)

五、完整代码展示

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            font-size: 36px;
            margin: 0 auto;
            text-align: center;
            line-height: 500px;
        }

        span {
            color: red;
        }
    </style>
</head>

<body>
    <p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
    <>
        function showTime() {
            var spans = document.querySelectorAll('span');
            var endTime = new Date('2022-10-1 12:00:00').getTime();
            var newTime = new Date().getTime();
            var diffTime = (endTime - newTime) / 1000;
            var day = parseInt(diffTime / 60 / 60 / 24);
            var honur = parseInt(diffTime / 60 / 60 % 24);
            var min = parseInt(diffTime / 60 % 60);
            var sen = parseInt(diffTime % 60);
            spans[0].innerText = day;
            spans[1].innerText = honur;
            spans[2].innerText = min;
            spans[3].innerText = sen;
        }
        setInterval(showTime, 1000)


    </>
</body>

</html>