最近在做一个项目，用到了点击按钮实现倒计时，这个用js来实现很简单。但是遇到了一个问题

页面刷新后js重新加载导致 倒计时重新开始，或者直接初始化了

后来通过 cookie 保存来实现了js倒计时，关闭页面和强制刷新都不会停止

主要思路

通过获取当前时间 与 倒计时停止时间 之间的时间间隔来确定倒计时的数值。

具体如下：

1.首次加载页面 点击开始

1) 获取当前时间  与要倒计时的时间相加获得要 停止计时的时间

2) 用cookie保存这个停止计时的时候

3) 通过js的setInterval  进行定时刷新时间

4) 当倒计时结束后 清楚cookie中保存的结束时间

2.当第二次进入页面或刷新页面时

1)首先判断cookie中时候有结束时间

2)有取出 和 当前时间求差 如果 差值大于倒计时间隔时间 说明倒计时已结束需要重新点击 否则就将这个差值作为倒计时开始的数字

3）没有需要重新点击开始倒计时

闲话少说，上代码~~~~

  1. <html>
  2. <head>
  3. <title>JS倒计时（无视刷新）</title>
  4.  
  5. <style>
  6. .disabled {
  7.     background: #fff;
  8.     color: #ccc;
  9.     border: solid 0px;
  10. }
  11. .disabled:hover {
  12.      background:none;
  13.       color: #ccc;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18.  
  19. <input type="tel" placeholder="请输入手机号" name="Phone">
  20. <a class="fasong" id="btnSend" style="cursor:pointer;">发送验证码</a>
  21. </body>
  22.  
  23. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  24. <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  25. <script language="javascript">
  26.  
  27. $(function () {
  28.   //点击发送验证码
  29.     $('body').on('click', '#btnSend', function () {
  30.           $('body').off('click', '#btnSend');
  31.           LockButton('#btnSend', 60);
  32.       }) 
  33.  
  34.     //读取cookie
  35.     if ($.cookie("djsendtime") != undefined && !isNaN($.cookie("djsendtime"))) {  //读取到了cookie值
  36.         var djsendtime = $.cookie("djsendtime");
  37.         var now = new Date().getTime();  //当前时间戳
  38.         var locksecends = parseInt((djsendtime - now) / 1000);
  39.         if (locksecends <= 0) {
  40.             $.cookie("djsendtime", null);
  41.         } else {
  42.             LockButton('#btnSend', locksecends);
  43.         }
  44.     }
  45.  
  46. })
  47.  
  48. // 按钮倒计时
  49. var LockButton = function (btnObjId, locksecends) {
  50.     //1.获取当前系统时间
  51.     //2.获取 locksecends 后的系统时间
  52.     //3.用cookie保存到期时间
  53.     //4.每次加载后获取cookie中保存的时间
  54.     //5.用到期时间减去当前时间获取倒计时
  55.     var djsendtime = $.cookie("djsendtime");
  56.     if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
  57.         var now = new Date().getTime();  //当前时间戳
  58.         var endtime = locksecends * 1000 + now;  //结束时间戳
  59.         $.cookie("djsendtime", endtime);  //将结束时间保存到cookie
  60.     }
  61.     $(btnObjId).addClass('disabled').attr('disabled', 'disabled').text('(' + locksecends + ')秒后重新获取');
  62.     $('body').off('click', '#btnSendSMS');
  63.     var timer = setInterval(function () {
  64.         locksecends--;
  65.         $(btnObjId).text('(' + locksecends + ')秒后重新获取');
  66.         if (locksecends <= 0) {
  67. 		//倒计时结束清除cookie值
  68.             $.cookie("djsendtime", null);
  69.             $(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
  70.             $('body').on('click', btnObjId);
  71.             clearInterval(timer);
  72.         }
  73.     }, 1000);
  74. };
  75. </script>
  76.  
  77. </html>

运行：　　

无论怎么刷新，倒计时都会继续不会重新开始

JS倒计时（刷新页面不影响）的实现思路的更多相关文章

  1. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  2. 页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  3. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  4. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  5. JS自动刷新页面一次

    <script type="text/javascript"> //刷新页面 if(location.href.indexOf("refresh=1" ...

  6. js 如何刷新页面

    Javascript刷新页面的几种方法(未测试):1 history.go(0)2 location.reload()3 location=location4 location.assign(loca ...

  7. js倒计时，页面刷新时，不会从头计时

    最近不忙,瞎鼓捣...哈哈 这里利用了H5的本地存储 localStorage,取秒数直接用了php的time()方法,就懒得用js取了. 把第一次访问页面时的时间存在客户端,然后再刷新的时候,比较用 ...

  8. js倒计时防页面刷新

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 160301、js倒计时，页面上显示时间

    js: //倒计时 var countdown=60,t; function settime(){ if (countdown == 0) { $("#validateBtn"). ...

随机推荐

  1. 前端眼里的docker

    docker是什么 可以简单的认为docker容器是一个虚拟机,封装就是把这个虚拟机打包,打包后能在任何系统跑,docker装上即用.也可以形象的比喻成一个集装箱,把所有货物都打包好放到箱子里,不需要 ...

  2. visio2019专业版激活码

    这里面有    :  最新Project2019+ Visio2019专业增强版和专业版永久激活密钥分享 (weibo.com)

  3. Java中使用最频繁及最通用的Java工具类

    在Java中,工具类定义了一组公共方法,Java中使用最频繁及最通用的Java工具类. 一. org.apache.commons.io.IOUtils closeQuietly:关闭一个IO流.so ...

  4. 安卓电池健康查看软件AccuBattery 分享

    一.天下苦秦久矣 说实话,我是小米的忠实粉丝(雷总打钱),手里目前是红米k30pro标准版, 室友中有用华为也有苹果的,据我所知苹果系统是可以看到电池健康的,但是安卓却不行, 所以推荐大家一个安卓软件 ...

  5. WebSocket学习笔记

    参考文章链接:http://www.ruanyifeng.com/blog/2017/05/websocket.html 简单示例:https://www.yiibai.com/websocket/p ...

  6. c++对c的拓展_指针的引用

    套用引用公式:Type & ref =val; 假设:type 类型为int * 由公式得 int * & ref = val; // int * *const ref=&va ...

  7. 测试脚本配置、ORM必知必会13条、双下划线查询、一对多外键关系、多对多外键关系、多表查询

    测试脚本配置 ''' 当你只是想测试django中的某一个文件内容 那么你可以不用书写前后端交互的形式而是直接写一个测试脚本即可 脚本代码无论是写在应用下的test.py还是单独开设py文件都可以 ' ...

  8. 使用ABP SignalR重构消息服务（二）

    使用ABP SignalR重构消息服务(二) 上篇使用ABP SignalR重构消息服务(一)主要讲的是SignalR的基础知识和前端如何使用SignalR,这段时间也是落实方案设计.这篇我主要讲解S ...

  9. 在UnityUI中绘制线状统计图

    ##先来个效果图 觉得不好看可以自己调整 ##1.绘制数据点 线状图一般由数据点和连线组成 在绘制连线之前,我们先标出数据点 这里我选择用Image图片来绘制数据点 新建Canvas,添加空物体Gra ...

  10. css 实现随风摆动

    无标题文档 @-webkit-keyframes open { 0% { -webkit-transform: rotateX(-120deg); } 25% { -webkit-transform: ...