页面可刷新的倒计时

最新推荐文章于 2024-01-16 14:47:33 发布

ouqi_qiou

最新推荐文章于 2024-01-16 14:47:33 发布

阅读量723

点赞数

分类专栏： HTML5前端开发文章标签：倒计时 js

本文链接：https://blog.csdn.net/ouqi_qiou/article/details/75148901

版权

HTML5前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

写了一个5分钟倒计时的代码，有的时候代码需要刷新，然后倒计时又从4：59开始了，我想到的一个解决办法，就是使用缓存，将开始倒计时的时间加上要倒计时的5分钟设为缓存，然后直接用这个缓存时间减去当前时间，就可以一直倒计时了，不管你在倒计时过程中操作了什么，时间总在变吧，哈哈，原理就是这样嘀。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>简单易用的倒计时js代码</title>

    </head>

    <body>
        <div id="time"></div>
        <script src="js/jquery-git.js"></script>
        <script>
            localStorage.setItem('start', new Date().getTime());
            countDown(localStorage.getItem('start'));

            function countDown(startTime) {
                var time = setInterval(function() {
                    var currentTime = new Date();
                    var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);
                    var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);

                    if(min < 10) {
                        min = "0" + min;
                    }
                    if(second < 10) {
                        second = "0" + second;
                    }

                    var countDown = min + ":" + second;
                    $('#time').html(countDown);

                    if(second == 0 && min == 0) {
                        clearInterval(time);
                    }
                }, 1000)
            }
        </script>

    </body>

</html>

ouqi_qiou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面可刷新的倒计时

写了一个5分钟倒计时的代码，有的时候代码需要刷新，然后倒计时又从4：59开始了，我想到的一个解决办法，就是使用缓存，将开始倒计时的时间加上要倒计时的5分钟设为缓存，然后直接用这个缓存时间减去当前时间，就可以一直倒计时了，不管你在倒计时过程中操作了什么，时间总在变吧，哈哈，原理就是这样嘀。<!doctype html><html> <head> <meta charset="u
复制链接

扫一扫