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脚本
Dec 03 Javascript
Iframe thickbox2.0使用的方法
Mar 05 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
JS代码优化的8点建议
Feb 04 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
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
javascript中的new使用
2010/03/20 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Pytorch 实现权重初始化
2019/12/31 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python中pow函数用法及功能说明
2020/12/04 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
超市营业员求职简历的自我评价
2013/10/17 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技