js倒计时刷新页面不受影响

JS倒计时（无视页面刷新）使用localStorage

<html>
<head>
<title>JS倒计时（无视页面刷新）使用localStorage</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 language="javascript">$(function () {//点击发送验证码$('body').on('click', '#btnSend', function () {$('body').off('click', '#btnSend');LockButton('#btnSend', 60);})//读取localStoragevar djsendtime = localStorage.getItem("djsendtime");if (djsendtime != undefined && !isNaN(djsendtime)) {  var now = new Date().getTime();  //当前时间戳var locksecends = parseInt((djsendtime - now) / 1000);if (locksecends <= 0) {localStorage.removeItem("djsendtime", null);} else {LockButton('#btnSend', locksecends);}}})// 按钮倒计时
var LockButton = function (btnObjId, locksecends) {//1.获取当前系统时间//2.获取 locksecends 后的系统时间//3.用 localStorage 保存到期时间//4.每次加载后获取 localStorage中保存的时间//5.用到期时间减去当前时间获取倒计时var djsendtime = localStorage.getItem("djsendtime")if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {var now = new Date().getTime();  //当前时间戳var endtime = locksecends * 1000 + now;  //结束时间戳localStorage.setItem("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) {//倒计时结束清除 localStorage值localStorage.removeItem("djsendtime", null);$(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');$('body').on('click', btnObjId);clearInterval(timer);}}, 1000);
};
</script></html>

js倒计时刷新页面不受影响相关推荐

VUE倒计时刷新页面不影响
前端强制性JS倒计时关闭浏览器(刷新页面也存在)也会存在的倒计时* VUE 倒计时刷新页面也存在 (持续更新) 不多BB 直接上代码活用 localStorage 机制 (VUE+webpack版 ...
页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
js实现刷新页面的方法
js 刷新当前页面的方法: reload() 方法; replace() 方法; 页面自动刷新; window.history.go(0) document.execCommand(''Refres ...
java中刷新js函数,js常用刷新页面方法汇总
如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选 ...
java页面强制刷新,JS关于刷新页面的相关总结
很多程序员无论是新手还是老的程序员都避免不了关于JS刷新页面的相关内容,在本文中我们整理了脚本之家总结的关于JS页面刷新的相关重要知识点文章,一起来跟着学习下. reload 方法,该方法强迫浏览器刷 ...
如何用JS局部刷新页面指定元素
刷新页内指定元素 window.location.reload("#id")
php js页面刷新,JS刷新页面方法总结
这次给大家带来JS刷新页面方法总结,JS刷新页面的注意事项有哪些,下面就是实战案例,一起来看一下. JS刷新当前页面的几种方法总结reload 方法,该方法强迫浏览器刷新当前页面 replace 方法 ...
刷新页面保留input所填的值_页面刷新时保留input键入值
转自:http://unbounder.iteye.com/blog/459183 一般来说,页面刷新时不保留input键入值的需要比较多,但是也有例外,譬如咱这次就遇上需要保留input键入值. 在 ...

js倒计时刷新页面不受影响

js倒计时刷新页面不受影响相关推荐

最新文章

热门文章