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

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

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

主要思路

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

具体如下:

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

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

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

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

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

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

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

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

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

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

<html>
<head>
<title>JS倒计时(无视刷新)</title> <style>
.disabled {
background: #fff;
color: #ccc;
border: solid 0px;
}
.disabled:hover {
background:none;
color: #ccc;
}
</style>
</head>
<body> <input type="tel" placeholder="请输入手机号" name="Phone">
<a class="fasong" id="btnSend" style="cursor:pointer;">发送验证码</a>
</body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script language="javascript"> $(function () {
//点击发送验证码
$('body').on('click', '#btnSend', function () {
$('body').off('click', '#btnSend');
LockButton('#btnSend', 60);
}) //读取cookie
if ($.cookie("djsendtime") != undefined && !isNaN($.cookie("djsendtime"))) { //读取到了cookie值
var djsendtime = $.cookie("djsendtime");
var now = new Date().getTime(); //当前时间戳
var locksecends = parseInt((djsendtime - now) / 1000);
if (locksecends <= 0) {
$.cookie("djsendtime", null);
} else {
LockButton('#btnSend', locksecends);
}
} }) // 按钮倒计时
var LockButton = function (btnObjId, locksecends) {
//1.获取当前系统时间
//2.获取 locksecends 后的系统时间
//3.用cookie保存到期时间
//4.每次加载后获取cookie中保存的时间
//5.用到期时间减去当前时间获取倒计时
var djsendtime = $.cookie("djsendtime");
if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
var now = new Date().getTime(); //当前时间戳
var endtime = locksecends * 1000 + now; //结束时间戳
$.cookie("djsendtime", endtime); //将结束时间保存到cookie
}
$(btnObjId).addClass('disabled').attr('disabled', 'disabled').text('(' + locksecends + ')秒后重新获取');
$('body').off('click', '#btnSendSMS');
var timer = setInterval(function () {
locksecends--;
$(btnObjId).text('(' + locksecends + ')秒后重新获取');
if (locksecends <= 0) {
//倒计时结束清除cookie值
$.cookie("djsendtime", null);
$(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
$('body').on('click', btnObjId);
clearInterval(timer);
}
}, 1000);
};
</script> </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. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  2. 我试试这个昵称好使不队项目NABCD指路

    我试试这个昵称好使不队项目NABCD指路:https://www.cnblogs.com/team-development/p/14617203.html

  3. 用SimpleDateFormat求出哪天是星期几,如2008-11-11

    题目5: 巧妙利用SimpleDateFormat求出: 2008-11-11是星期几?import java.text.ParseException;import java.text.SimpleD ...

  4. java中时间的规范是按美国,SimpleDateFormat怎么处理

    题目3.2: 如果时间的规范是按美国,怎么处理? import java.text.ParseException;import java.text.SimpleDateFormat;import ja ...

  5. vue行内动态添加样式或者动态添加类名

    还是记录一下吧(๑•ᴗ•๑) <li :style="{backgroundImage:`url(${item.pic})`}" @click="chooseVip ...

  6. 为什么HashMap使用红黑树而不使用AVL树

    为什么HashMap使用红黑树而不使用AVL树? 红黑树适用于大量插入和删除:因为它是非严格的平衡树:只要从根节点到叶子节点的最长路径不超过最短路径的2倍,就不用进行平衡调节 AVL 树是严格的平衡树 ...

  7. Go xmas2020 学习笔记 12、Structs, Struct tags & JSON

    12-Structs, Struct tags & JSON. Struct. Struct Gotcha. Anonymous Struct Type. Make the zero valu ...

  8. Divan and bitwise operations

    这是一道比较综合的数学题目,光是吧题目看懂就花了我好一会儿时间,先看看题目吧: 题目分析:对于m段给定连续段的或值,要求出n个数的序列子序列的异或值之和: 题解: 这道题,我们先不要把它当作一个数一个 ...

  9. Python技能树及CSDN MarkDown编辑器测评

    测评目录 python技能树测评 python技能树是什么 python技能树长什么样 如何学习python技能树 python技能树可能需要的改进 对python技能树的总结 CSDN MarkDo ...

  10. netty系列之:netty中的核心MessageToByte编码器

    目录 简介 MessageToByte框架简介 MessageToByteEncoder ByteToMessageDecoder ByteToMessageCodec 总结 简介 之前的文章中,我们 ...