手机验证码倒计时

需求重现

绑定手机号，或者手机号注册账户时，需要验证码，验证码点击后60s内禁止操作

解决办法
html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定手机号</title>
    <link rel="stylesheet" href="static/css/base.css">
    <link rel="stylesheet" href="static/css/public.css">
    <style>
        section{
            width: 100%;
            height: auto;
            overflow:hidden;
            padding: 0 0.2rem;
            margin-top: 0.24rem;
            background: #fff;
        }
        .item{
            width: 100%;
            height: 0.8rem;
            border-bottom: 0.01rem solid #cfcfcf;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-align-items: center;
            position: relative;
        }
        .item label{
            width: 20%;
            height: 100%;
            line-height: 0.8rem;
        }
        #phone{
            width: 80%;
            height: 100%;
            line-height: 0.8rem;
        }
        #code{
            width: 55%;
            height: 100%;
            line-height: 0.8rem;
        }
        #checkCode{
            width: 24%;
            height: 80%;
            border-left: 0.01rem solid #cfcfcf;
            color: #47bfc5;
            display: flex;
            align-items: center;
            justify-content: center;
            display: -webkit-flex;
            -webkit-align-items: center;
            -webkit-justify-content: center;
            position: relative;
        }
        .mask{
            width: 24%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 10;
            display: none;
        }
        #submit{
            margin: 0 0.2rem;
            height: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            display: -webkit-flex;
            -webkit-align-items: center;
            -webkit-justify-content: center;
            margin-top: 0.5rem;
            background: #47bfc5;
            color: #fff;
            font-size: 0.3rem;
        }
    </style>
</head>
<body>
<main>
    <section>
        <div class="item">
            <label for="phone">手机号</label>
            <input type="number" id="phone" placeholder="请输入绑定手机号">
        </div>
        <div class="item" style="border: none;">
            <label for="phone">验证码</label>
            <input type="number" id="code" placeholder="请输入验证码">
            <div id="checkCode">
                获取验证码
            </div>
            <div class="mask"></div>
        </div>
    </section>
    <div id="submit">确  认</div>
</main>
</body>
</html>
<script src="static/js/jquery-3.2.1.min.js"></script>

js文件

var countSeconds=60;//验证码倒计时
var aa;             //延迟变量
$("#checkCode").click(function () {
    var phone=$("#phone").val();
    if(phone==''){
        layMessage("请输入手机号！");
        return false;
    }
    if(!mobileReg(phone)){
        layMessage("手机格式不正确");
        return false;
    }

    clearTimeout(aa);//清除延迟
    settime();
    $(".mask").show();

    var code=$.md5(phone+"APP_20!$_TY_HZ");
    console.log(code);
    //向手机发送验证码
    //这里是我自己封装的ajax请求，根据自己实际情况自定义
    publicAjax(baseAjaxUrl+"/ty_api/user/sendMessage","POST",{"code":code,"mobile":phone},sendInfoCall);

});

//验证码倒计时
function settime() {
    if(countSeconds==0){
        $(".mask").hide();
        $("#checkCode").html("获取验证码");
        countSeconds=60;
        return;
    }else{
        $("#checkCode").html("剩余"+countSeconds+"s");
        countSeconds--;
    }
    aa=setTimeout(function () {
        settime()
    },1000)
}
//发送短信的回调
function sendInfoCall(res) {
    if(res.errorCode==200){
        layMessage(res.message,1);
    }else{
        layMessage(res.message,1);
    }
}

截图
这里写图片描述

这样就可以了！仅供参考！

手机验证码倒计时

猜你喜欢