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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
webpack 模块热替换原理
Apr 09 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 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代码重构工具推荐
2014/10/14 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用Python的turtle模块画图的方法
2017/11/15 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
学校安全生产承诺书
2014/05/23 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
污水处理保证书
2015/05/09 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL