JS倒计时(刷新页面不影响)的实现思路
2024-10-19 18:42:43
最近在做一个项目,用到了点击按钮实现倒计时,这个用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>
运行:
无论怎么刷新,倒计时都会继续不会重新开始
最新文章
- C#获取CSV文件内容对逗号和引号分隔的处理
- Python画图笔记
- update
- 修复 Java 内存模型,第 1 部分——Brian Goetz
- DLUTOJ #1394 Magic Questions
- Balanced Binary Tree
- redhat的启动方式和执行次序
- YII千万级PV架构经验分享--理论篇
- Python学习(2)
- uva 1400 - ";Ray, Pass me the dishes!";
- ld: 18 duplicate symbols for architecture i386 .linker command failed with exit code 1 (use -v to see invocation)_
- 2017 ICPC区域赛(西安站)--- J题 LOL(DP)
- LCA(最近公共祖先)之倍增算法
- Python使用Mysql官方驱动(取出dict类型的数据)
- Python学习笔记 - 切片
- C语言中数组使用负数值的标记
- Servlet 文件上传
- 理解交叉熵(cross_entropy)作为损失函数在神经网络中的作用
- 【BZOJ2159】Crash的文明世界(第二类斯特林数,动态规划)
- P3128 [USACO15DEC]最大流Max Flow