手机号验证码倒计时

作者: leesession | 来源:发表于2017-12-11 14:48 被阅读0次

【微信小程序】获取验证码60s倒计时
微信小程序短信验证码登录倒计时 setInterval
Axure RP9 倒计时效果
手机号、验证码
iOS 一句话可集成倒计时按钮
输入正确的手机号码才可以发送验证码 2018-08-10
短信验证码功能如何设计
微信小程序60秒倒计时
短信验证模拟登录饿了么
Android 小技巧之 Login

<html>
<div class="weui-cell weui-cell_vcode login">
        <div class="weui-cell__hd">
            <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="请输入手机号" id="mobile" >
        </div>
    </div>
    <div class="weui-cell weui-cell_vcode login">
        <div class="weui-cell__hd">
            <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="请输入验证码" id="code">
        </div>
        <div class="weui-cell__ft">
            <button class="weui-vcode-btn" id="getCode">获取</button>
            <!--当点击获取时，60秒后重新发送-->
            <button class="weui-vcode-btn" id="timeCode">60秒</button>
     </div>
</div>
<script>
 //隐藏倒计时按钮
    $("#timeCode").hide();
    //点击获取验证码
    $("#getCode").click(()=>{
        //获取手机号
        var mobile=$("#mobile").val();
        //    手机号正则
        var reg=/^1[3|4|5|7|8][0-9]{9}$/;
        if(reg.test(mobile)){
            //调用倒计时函数
            reserveCode();
        }else {
            alert("手机号格式错误")
        }
    });
    function reserveCode(){
        //显示60s倒计时，隐藏‘获取验证码’
        var time=0;
        //倒计时-打开
        $("#timeCode").show();
        //获取-隐藏
        $("#getCode").hide();
        timer=setInterval(function(){
            time=parseInt($("#timeCode").html());
            time--;
            $("#timeCode").html(time+"秒");
            //60s后停止定时器
            if(time==0){
                $("#timeCode").html("60秒").hide();
                $("#getCode").show();
                clearInterval(timer);
            }
        },1000)
    }