如何在JavaScript中实现防刷新的倒计时功能
最编程
2024-02-23 15:29:49
...
js实现倒计时(防止页面刷新)
最新推荐文章于 2021-06-05 08:09:02 发布
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>test</title> <script src="js/jquery-3.4.1.js"></script> </head> <body> <input type="tel" placeholder="请输入手机号" name="Phone"> <input type="button" value="点击发送验证码!" οnclick="countDown()" id="count" style="cursor:pointer;"> <input type="button" value="是否有cookie" οnclick="hasCookie()"> </body> <script type="text/javascript"> var cookie = document.cookie; var num; var interval ; $(function () { console.log(cookie) //刷新页面如果cookie有值,说明倒计时已经开始,接着倒计时 //否则是第一次进入页面,初始化num的值 if(cookie != "" && cookie.indexOf("countTime")>=0){ num = parseInt(cookie.substring(cookie.indexOf("=")+1)); $("#count").val(num+'秒后可重新发送'); countDown(); }else{ //初始化倒计时的时间 num = 10; } }) //使用cookie倒计时 function countDown(){ //如果浏览器禁用了cookie,页面刷新就重新计时 if(!navigator.cookieEnabled){ // if(true){ console.log("不使用cookie") countDownWithoutCookie(); return; } var d = new Date(); d.setTime(d.getTime() + (10*1000)); //倒计时结束后再次点击重新刷新倒计时的时间 if(num == 0){ num = 10; } //设置input不可点击 $("#count").attr("disabled",true); //开始定时器 interval = setInterval(function () { num = num-1 //重新设置cookie console.log("重新设置cookie") document.cookie = "countTime" + "=" + num + ";" + "expires="+ d.toUTCString() + ";path=/"; if(num > 0){ $("#count").val(num+'秒后可重新发送'); }else{ $("#count").val("点击发送验证码!"); $("#count").attr("disabled",false); //清除cookie,不然刷新浏览器会自动倒计时 document.cookie = "countTime" + "=" + num + ";" + "expires="+ new Date().toUTCString() + ";path=/"; //清除计时器 clearInterval(interval); } },1000); } //不适用cookie倒计时 function countDownWithoutCookie() { num = 10; $("#count").attr("disabled",true); interval = setInterval(function () { $("#count").val(num+"秒后可重新发送"); num = num-1; if(num == 0){ ("#count").attr("disabled","false"); clearInterval(interval); } },1000); } function hasCookie() { if(document.cookie != ""){ console.log(document.cookie) }else{ console.log("cookie为空") } } </script> </html>
上一篇: JS:倒计时效果
推荐阅读
-
如何使用JavaScript实现防止页面刷新的倒计时功能
-
如何在JavaScript中实现倒计时功能?从天到时再到分和秒的详细教程
-
如何在JavaScript中实现防刷新的倒计时功能
-
如何在JavaScript中实现计时器的倒计时功能
-
如何在Vue中实现倒计时不停刷新但不重置为初始时间的方法
-
如何在JavaScript中实现网页上的倒计时功能
-
如何在JavaScript中实现评论点赞功能的方法指南
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。
-
iOS上的JS复制功能:如何在JavaScript中实现复制操作?
-
如何在JS中实现防复制、防粘贴和禁止右键点击的功能?