jquery实现手机发送验证码的倒计时代码
Posted
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实现手机发送验证码的倒计时代码的主要内容，如果未能解决你的问题，请参考以下文章
用JavaScript写一个简单的倒计时，可以应用在发送短信验证码的“59秒后重新发送验证短信”