【亲测】实现秒表倒计时+缓存倒计时功能

实现秒表倒计时+缓存倒计时功能

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p class="diffDate"></p>
        <p class="counterSecond"></p>
    </body>
    <script type="text/javascript">
        countTime();
        function countTime() {
            var date = new Date();
            var now = date.getTime();

            var date2 = new Date();
            //倒计时10天
            date2.setDate(date2.getDate() + 10);

            var d, h, m, s, ms;
            //从本地获取保存的时间
            var leftTime = '';
            var cacheDate = localStorage.getItem( "counter");
            if(cacheDate) {
                //缓存有值
                leftTime = new Date(parseInt(cacheDate)).getTime() - 1000;
                //更新缓存
                localStorage.setItem("counter", leftTime);
            }
            //如果没有缓存或时间过期
            if(!cacheDate || leftTime < 0) {
                leftTime = date2.getTime() - now;
                //保存最后时间
                localStorage.setItem("counter", leftTime - 1000);
            }

            if(leftTime >= 0) {
                d = Math.floor(leftTime / 1000 / 60 / 60 / 24 % 31);
                h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                m = Math.floor(leftTime / 1000 / 60 % 60);
                s = Math.floor(leftTime / 1000 % 60);
                ms = Math.floor(leftTime % 1000);
                if(d < 10) {
                    d = "0" + d;
                }
                if(h < 10) {
                    h = "0" + h;
                }
                if(m < 10) {
                    m = "0" + m;
                }
                if(s < 10) {
                    s = "0" + s;
                }
            }
            //console.log(d + ":" + h + ":" + m + ":" + s + ":" + ms)
            document.getElementsByClassName("diffDate")[0].innerHTML = d + ":" + h + ":" + m + ":" + s;
        }
        setInterval(countTime, 1000);

        var diffCount = 0;
        /**
         * 从0到100计数
         */
        function countMilSecond() {
            ++diffCount;
            if(diffCount >= 100) {
                diffCount = 0;
            }
            if(diffCount < 10) {
                diffCount = '0' + diffCount;
            }
            document.getElementsByClassName("counterSecond")[0].innerHTML = diffCount;
        }
        setInterval(countMilSecond, 10);
    </script>

</html>

 

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!245356668@qq.com
2. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理,解压密码:我正青年 或者 www.5zqn.com
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!
8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
我正青年 » 【亲测】实现秒表倒计时+缓存倒计时功能

一家专门做精品素材的网站

加入VIP会员 联系站长