编程 Javascript

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

ouqi_qiou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript prototype对象的属性说明

Mar 13 Javascript

js截取小数点后几位的写法

Nov 14 Javascript

jquery mobile页面跳转后样式丢失js失效的解决方法

Sep 06 Javascript

js带点自动图片轮播幻灯片特效代码分享

Sep 07 Javascript

Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

Jul 14 Javascript

D3.js中强制异步文件读取同步的几种方法

Feb 06 Javascript

微信小程序详解页面跳转与返回并回传数据

Feb 13 Javascript

ionic中的$ionicPlatform.ready事件中的通用设置

Jun 11 Javascript

React学习笔记之条件渲染（一）

Jul 02 Javascript

Javascript防止图片拉伸的自适应处理方法

Dec 26 Javascript

ionic使用angularjs表单验证（模板验证）

Dec 12 Javascript

React 并发功能体验(前端的并发模式)

Jul 01 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