美文网首页
jquery实现手机验证码效果代码

jquery实现手机验证码效果代码

作者: 码太农 | 来源:发表于2017-09-22 13:45 被阅读0次

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
    <script src="../postExpress/assets/OutInvoke/PC/js/common/jquery.min.js"></script>
    <script type="text/javascript">

    var InterValObj; //timer变量,控制时间
    var count = 60; //间隔函数,1秒执行
    var curCount;//当前剩余秒数
    
    
    function sendMessage() {
        curCount = count;
        //设置button效果,开始计时
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
        //向后台发送处理数据
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "text", //数据格式:JSON
            url: 'Login.ashx', //目标地址
            data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
            error: function (XMLHttpRequest, textStatus, errorThrown) { },
            success: function (msg){ }
        });
    }
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").val("重新发送验证码");
        }
        else {
            curCount--;
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
        }
    }
    

    </script>

    </body>
    </html>

    相关文章

      网友评论

          本文标题:jquery实现手机验证码效果代码

          本文链接:https://www.haomeiwen.com/subject/uvhfextx.html