js实现倒计时（防止页面刷新）

最新推荐文章于 2022-07-13 15:01:24 发布

Vin__

最新推荐文章于 2022-07-13 15:01:24 发布

阅读量1.3k

点赞数

文章标签： js倒计时

本文链接：https://blog.csdn.net/Vin__/article/details/103672038

版权

<!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>

Vin__

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现倒计时（防止页面刷新）

<!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....
复制链接

扫一扫