验证码60s倒计时前端效果

最新推荐文章于 2024-06-07 16:03:32 发布

weixin_30332705

最新推荐文章于 2024-06-07 16:03:32 发布

阅读量150

点赞数

文章标签：前端 php ViewUI

原文链接：http://www.cnblogs.com/konglingxi/p/9034621.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机短信验证码</title>
    <script src="jquery-2.1.4.js"></script>
</head>
<body>
    <div>
        <div style="vertical-align: middle">
            <input id="mobile" type="tel" name="mobile" placeholder="手机号码"/>
            <span style="text-align: center;">
                <button id="sendmsg">获取验证码</button>
            </span>
        </div>
    </div>
</body>
</html>
<script >

    var InterValObj; //timer变量，控制时间
    var count = 5; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var code = ""; //验证码
    var codeLength = 6;//验证码长度

    $(function () {
        $('#sendmsg').click(function () {
            $.ajax({
                type: "post",
                // 手机短信验证码发送程序
                url: "sendCaptcha.php",
                data: "admin=" +"&mobile="+$("#mobile").val() ,
                success: function (result) {//通过返回值判断发送状态
                    // console.log(result);
                   if(result==0){
                       curCount = count;
                       //设置button效果，开始计时
                       $("#sendmsg").css("background-color", "LightSkyBlue");
                       $("#sendmsg").attr("disabled", "true");
                       $("#sendmsg").html("获取" + curCount + "秒");
                       InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                      // alert("验证码发送成功，请查收!");
                   }
                    if(result==1){

                        alert("手机号不匹配!");
                    }

                },
                error:function(result){
                    console.log('error');
                },
                dataType: 'json'

            })
        })
    })

    function SetRemainTime() {

        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#sendmsg").removeAttr("disabled");//启用按钮
            $("#sendmsg").css("background-color", "");
            $("#sendmsg").html("重发验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        }
        else {
            curCount--;
            $("#sendmsg").html("获取" + curCount + "秒");
        }
    }
</script>