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 相关文章推荐
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
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
终于听上了直流胆调频
2021/03/02 无线电
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python中不同进制的语法及转换方法分析
2016/07/27 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python unittest实现api自动化测试
2018/04/04 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python内存管理实例分析
2019/07/10 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
百度软件工程师职位
2013/02/14 面试题
学习雷锋倡议书
2014/04/15 职场文书
论文答谢词
2015/01/20 职场文书
司机岗位职责
2015/02/04 职场文书
信用卡工资证明范本
2015/06/19 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
virtualenv隔离Python环境的问题解析
2022/06/21 Python