jq写 验证码与点击60秒后重新发送验证码

Posted 2020-11-24 lxc127136

一.html部分

 <div class="f21">获取验证码</div>

 

二.css部分                //不要忘记引入自己写的css

 .f21{

    height: 36px;

    line-height: 35px;

    width: 125px;

    margin-right: 55px;

    margin-top: 20px;

    background-color: #e5e5e5;

    font-size: 15px;

    border: 1px solid #e5e5e5;

    text-align: center;

    color: #c7000b;

 }

三. js部分         //引入js库 及自己写的js

var timer="";

var nums=60;

var validCode=true;//定义该变量是为了处理后面的重复点击事件

$(".f21").on(‘click‘,function(){

            console.log("111");

            var code=$(this);

            if(validCode){

                validCode=false;

                timer=setInterval(function(){

                    if(nums>0){

                        nums--;

                        code.text(nums+"秒后重新发送");

                        code.addClass("gray-bg");

                    }

                    else{

                        clearInterval(timer);

                        nums=60;//重置回去

                        validCode=true;

                        code.removeClass("gray-bg");

                        code.text("发送验证码");

            }

                },1000)

            }

            

        })