js+html5实现页面可刷新的倒计时效果

 更新时间:2017年07月15日 15:12:37   作者:ouqi_qiou   我要评论
这篇文章主要为大家详细介绍了js+html5实现页面可刷新的倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

写了一个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • JavaScript实现页面定时刷新(定时器,meta)

    JavaScript实现页面定时刷新(定时器,meta)

    很多朋友看到定时,很容易想到用js定时器,还有盆友用meta来设置,下面小编给大家介绍js实现页面定时刷新的方法,一起看看吧
    2016-10-10
  • Es6 Generator函数详细解析

    Es6 Generator函数详细解析

    Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。这篇文章给大家介绍Es6 Generator函数的相关知识,感兴趣的朋友一起看看吧
    2018-02-02
  • JavaScript数组的一些奇葩行为

    JavaScript数组的一些奇葩行为

    今天,复习了一下JavaScript的数组,然后,把他的一些奇葩行为总结了一下,分享在澳门金沙网上娱乐平台,欢迎大家参考
    2016-01-01
  • JavaScript中创建类/对象的几种方法总结

    JavaScript中创建类/对象的几种方法总结

    这篇文章主要是对JavaScript中创建类/对象的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JS自动生成动态HTML验证码页面

    JS自动生成动态HTML验证码页面

    这篇文章主要介绍了JS自动生成动态HTML验证码页面,输入错误自动清空输入框的功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JSON+HTML实现国家省市联动选择效果

    JSON+HTML实现国家省市联动选择效果

    实现国家省市联动的方法有很多,本文要为大家介绍的JSON+HTML如何实现,需要的朋友可以参考下
    2014-05-05
  • react实现antd线上主题动态切换功能

    react实现antd线上主题动态切换功能

    这篇文章主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 原生javascript和jquery判断浏览器版本等信息

    原生javascript和jquery判断浏览器版本等信息

    本文为大家详细介绍下通过jquery和原生javascript判断浏览器信息包括:判断浏览器是否为IE以及IE版本是多少等等,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 使用js画图之正弦曲线

    使用js画图之正弦曲线

    这篇文章主要介绍了使用js绘制几何图形的方法的系列文章,本文主要讲诉正弦曲线的绘制方法,需要的朋友可以参考下
    2015-01-01
  • 对layui中表单元素的使用详解

    对layui中表单元素的使用详解

    今天小编就为大家分享一篇对layui中表单元素的使用详解。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论