jquery实现手机发送验证码的倒计时代码

Posted 2023-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现手机发送验证码的倒计时代码相关的知识，希望对你有一定的参考价值。

参考技术A 复制代码
代码如下:
var
wait=60;//时间
function
time(o,p)
//o为按钮的对象，p为可选，这里是60秒过后，提示文字的改变
if
(wait
==
0)

o.removeAttr("disabled");
o.val("点击发送验证码");//改变按钮中value的值
p.html("如果您在1分钟内没有收到验证码，请检查您填写的手机号码是否正确或重新发送");
wait
=
60;

else

o.attr("disabled",
true);//倒计时过程中禁止点击按钮
o.val(wait
+
"秒后重新获取验证码");//改变按钮中value的值
wait--;
setTimeout(function()

time(o,p);//循环调用
,
1000)

视图：
复制代码
代码如下:
<input
class="mem_btn
mem_btn26"
type="submit"
name="yt0"
value="点击发送验证码"
id="btn">
调用：
复制代码
代码如下:
echo
CHtml::ajaxSubmitButton('点击发送验证码',
CHtml::normalizeUrl(
array('/ajax/sendGetPassMobilCaptcha','zm_id'=>$model->zm_id)
),
array('success'=>'function(result)
if(result==1)
$(".ys_98").html("验证码发送成功，请及时检查您的手机。");
time($("#yt0"),$(".ys_98"))
else
$(".ys_98").html("验证码发送失败，请重试，或联系管理员。");

','data'=>"zm_id=".$model->zm_id."&zm_mob=".$model->zm_mob."&zm_name=".$model->zm_name
),
array('class'=>'mem_btn
mem_btn26'));

jQuery手机发送验证码倒计时代码

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://s29.xtest.tech/res/bxdapp/js/jquery.min.js"></script>
        <script type="text/javascript">
        var InterValObj; //timer变量，控制时间
        var count = 5; //间隔函数，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>
    </head>
    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
</body>
</html>

以上是关于jquery实现手机发送验证码的倒计时代码的主要内容，如果未能解决你的问题，请参考以下文章

jQuery手机发送验证码倒计时代码

jquery 实现点击按钮后倒计时效果，多用于实现发送手机验证码邮箱验证码

C#实现发送验证码倒计时60秒

jQuery实现发送验证码30s倒计时，且刷新页面时有效

js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件

js/jq实现获取手机验证码倒计时效果