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


Posted in Javascript onJuly 15, 2017

写了一个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 相关文章推荐
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 #Javascript
vue增删改查的简单操作
Jul 15 #Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 #Javascript
Javascript实现基本运算器
Jul 15 #Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 #Javascript
Javascript实现时间倒计时效果
Jul 15 #Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
考察现实表现材料
2014/05/19 职场文书
公司租房协议书范本
2014/10/08 职场文书
自主招生自荐信范文
2015/03/04 职场文书
离职证明格式样本
2015/06/12 职场文书
小学体育组工作总结
2015/08/13 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书