您的位置：首页 > Web前端 > JQuery

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

2014-01-10 14:52 260 查看

点击(此处)折叠或打开

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title></title>
<script src=\"HTML/js/jquery-1.4.1.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
/*-------------------------------------------*/
var InterValObj; //timer变量，控制时间
var count = 5; //间隔函数，1秒执行
var curCount;//当前剩余秒数
var code = \"\"; //验证码
var codeLength = 6;//验证码长度
function sendMessage() {
curCount = count;
var dealType; //验证方式
var uid=$(\"#uid\").val();//用户uid
if ($(\"#phone\").attr(\"checked\") == true) {
dealType = \"phone\";
}
else {
dealType = \"email\";
}
//产生验证码
for (var i = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
//设置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(\"重新发送验证码\");
code = \"\"; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
else {
curCount--;
$(\"#btnSendCode\").val(\"请在\" + curCount + \"秒内输入验证码\");
}
}
</script>
</head>
<body>
<input id=\"btnSendCode\" type=\"button\" value=\"发送验证码\" onclick=\"sendMessage()\" /></p>
</body>
</html>

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/22392018/viewspace-1069261/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/22392018/viewspace-1069261/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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