<!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实现倒计时(防止页面刷新)
最新推荐文章于 2024-07-18 22:31:42 发布