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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
jquery实现submit提交表单
Feb 03 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
javascript常用的方法分享
Jul 01 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JS原形与原型链深入详解
May 09 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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
一端时间轮换的广告
2006/06/26 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python requests设置代理的方法步骤
2020/02/23 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2015年调度员工作总结
2015/04/30 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
晶体管单管来复再生式收音机
2021/04/22 无线电