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 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
浅谈javascript的原型继承
2012/07/25 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
js实现导航跟随效果
2018/11/17 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
UNIX文件类型
2013/08/29 面试题
毕业生个人求职自荐信
2014/02/26 职场文书
篮球社团活动总结
2014/06/27 职场文书
统计专业自荐书
2014/07/06 职场文书
国庆促销活动总结
2014/08/29 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
Python实现仓库管理系统
2022/05/30 Python