如何使用cookie写验证码倒计时

最新推荐文章于 2023-07-31 11:49:55 发布

原创最新推荐文章于 2023-07-31 11:49:55 发布 · 491 阅读

CC 4.0 BY-SA版权

本文档介绍了如何结合jQuery和Cookie实现验证码的倒计时功能。首先，需要正确导入jquery.js和cookie.js，确保cookie.js在jquery.js之后。接着，讲解了使用Cookie的相关方法，然后提供了HTML5和JavaScript代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.导入jquery.js和cookie.js

<script src="jquery-3.3.1.js"></script>
<script src="jquery.cookie.js"></script>

注意，cookie.js必须在jquery.js的后面。

2.关于如何使用cookie相关的方法

在这里插入图片描述

3.h5代码

<input class="input-group-text" id="mobile" name="mobile" type="text" placeholder="手机号">
<a href="#" id="send" ><p id="svc" class="text-center">发送验证码</p></a>

4.js代码

$("#svc").click(function svc() {
            // 初次点击获取事件时，还没有cookie，此时设置cookie的数值
            if($.cookie("cookieFlag")==null){flag=1;$.cookie("cookieFlag",flag); }
            // if($.cookie("cookieCount")==null){count=20;$.cookie("cookieCount",count); }
            if($.cookie("cookieFlag")==1){//当标志为1时表示可用
                $.ajax({ //发送ajax请求
                    type:"POST",
                    url:"",
                    data:{"mobile":$("#mobile").val()},
                    success:function (result) {
                        if(result.statusCode==1){
                            console.log("发送成功")

                        }
                        else{
                            alert(result.message)
                        }
                    }
                })
                settime()//调用settime函数
            }
        })
        function settime(){
            console.log("开始倒计时")
            $.cookie("cookieFlag",0);//开始倒计时，设置标志cookie为0，即a标签为不可用状态
            var count=20;//设置倒计时为20S
            var resend=setInterval(function () { //设置定时器
                if(count>0){ //如果倒计时没结束
                    // $("#send").attr("disabled","false") ;a标签用不了disabled属性
                    $("#svc").text("请稍后再试"+count).css("color","red");//设置标签的样式
                    count--;//倒计时自减
                }else { //倒计时为0时
                    $("#svc").text("发送验证码");
                    $.cookie("cookieFlag",1);//重新设置标志cookie为1，即a标签可用状态
                    count=20;
                    $("#svc").css("color","#007bff");
                    // $.cookie("cookieCount",null); //清除倒计时cookie
                    console.log("倒计时结束");
                    clearInterval(resend);//清除定时器
                    // return;
                }
                $.cookie("cookieCount",count);
            },1000)
        }
        $(function () { //页面加载时获取cookie标志，为0时说明倒计时正在进行中，获取cookieCount继续倒计时
            if($.cookie("cookieFlag")==0){
                var count=$.cookie("cookieCount");
                $("#svc").text("请稍后再试"+count).css("color","red");
                var resend=setInterval(function () {
                    if(count>0){
                        $("#svc").text("请稍后再试"+count).css("color","red");
                        count--;
                    }else {
                        $("#svc").text("发送验证码");
                        $.cookie("cookieFlag",1);
                        count=20;
                        $("#svc").css("color","#007bff");
                        clearInterval(resend);
                    }
                    $.cookie("cookieCount",count);
                },1000)
            }
        })