原生js实现倒计时功能

最新推荐文章于 2023-11-15 19:17:35 发布

Yq-J

最新推荐文章于 2023-11-15 19:17:35 发布

阅读量436

点赞数 2

分类专栏： js 文章标签： js CSS

本文链接：https://blog.csdn.net/qq_40825178/article/details/84898504

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先了解一下倒计时的原理：用未来的时间减去去现在的时间然后换算即可。（未来的时间点（不变）减现在的时间点（在变））。

简单的例子：计算距离2019年还有多长时间

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        p {
            font-size: 80px;
            text-align: center;
        }
        p span {
            color: red;
        }
        p span.time {
            color: black
        }
        body{padding-top:200px;}
    </style>
</head>
<body>
<p>距离2019年还有</p>
<p><span></span></p>
<script>
    var oSpan = document.getElementsByTagName('span')[0];
    function tow(n) {
        return n >= 0 && n < 10 ? '0' + n : '' + n;
    }
    function getDate() {
        var oDate = new Date();//获取日期对象
        var oldTime = oDate.getTime();//现在距离1970年的毫秒数
        var newDate = new Date('2019/1/1 00:00:00');// 这个为字符串写法，数字形式是：new Date( 2018,4,1,0,0,0 )，注意就是月份数字是从0开始的
        var newTime = newDate.getTime();//2019年距离1970年的毫秒数
        var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
        var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒；
        second = second % 86400;//余数代表剩下的秒数；
        var hour = Math.floor(second / 3600);//整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        var minute = Math.floor(second / 60);
        second %= 60;
        var str = tow(day) + '<span class="time">天</span>'
            + tow(hour) + '<span class="time">小时</span>'
            + tow(minute) + '<span class="time">分钟</span>'
            + tow(second) + '<span class="time">秒</span>';
        oSpan.innerHTML = str;
    }
    getDate();
    setInterval(getDate, 1000);
</script>

</body>
</html>

这样就可以实现一个倒计时的功能了

一些用到的固定公式：

//下面即为具体算法公式关于时分秒以及天,下面的t即为未来时间减现在时间的一个差
 天：Math.floor(t/86400)
 时：Math.floor(t%86400/3600)
 分：Math.floor(t%86400%3600/60)
 秒：t%60

Yq-J

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现倒计时功能

先了解一下倒计时的原理：用未来的时间减去去现在的时间然后换算即可。（未来的时间点（不变）减现在的时间点（在变））。简单的例子：计算距离2019年还有多长时间代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&
复制链接

扫一扫