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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
JS二分查找算法详解
Nov 01 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 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与Perl之间知识点区别整理
2019/03/19 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
浅析Ajax语法
2016/12/05 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
深入理解Django中内置的用户认证
2017/10/06 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
python爬取音频下载的示例代码
2020/10/19 Python
爱游人:Travelliker
2017/09/05 全球购物
性能服装:HYLETE
2018/08/14 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
自我鉴定怎么写
2014/01/12 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS