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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
JavaScript实现旋转木马轮播图
Mar 16 Javascript
js实现验证码功能
Jul 24 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/06 冲泡冲煮
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
php fread读取文件注意事项
2016/09/24 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
layui数据表格重载实现往后台传参
2019/11/15 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
使用python对excle和json互相转换的示例
2018/10/23 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Pytorch之contiguous的用法
2019/12/31 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
心理健康心得体会
2014/01/02 职场文书
先进党支部事迹材料
2014/01/13 职场文书
运动会入场词60字
2014/02/15 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
家长反馈意见及建议
2015/06/03 职场文书
python字典的元素访问实例详解
2021/07/21 Python
MySQL连接控制插件介绍
2021/09/25 MySQL