编程 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 相关文章推荐

jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

May 24 Javascript

在jquery中的ajax方法怎样通过JSONP进行远程调用

Apr 04 Javascript

jQuery position() 函数详解以及jQuery中position函数的应用

Dec 14 Javascript

JS代码随机生成姓名、手机号、身份证号、银行卡号

Apr 27 Javascript

Jquery插件仿百度搜索关键字自动匹配功能

May 11 Javascript

深入理解JS函数的参数(arguments)的使用

May 28 Javascript

JavaScript学习笔记整理_用于模式匹配的String方法

Sep 19 Javascript

jQuery实现别踩白块儿网页版小游戏

Jan 18 Javascript

js Dom实现换肤效果

Oct 21 Javascript

jquery实现楼层滚动效果

Jan 01 jQuery

js中复选框的取值及赋值示例详解

Oct 18 Javascript

通过vue.extend实现消息提示弹框的方法记录

Jan 07 Vue.js

详解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