<!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>
原文：
http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html
分享到：
相关推荐
在前端开发中，用户验证通常涉及发送验证码到用户的手机或邮箱，而验证码的发送往往伴随着一个倒计时功能，确保用户在一段时间内只能获取一次验证码。在这个过程中，jQuery 可以用来实现点击按钮触发倒计时以及按钮...
本篇内容主要介绍了如何使用jQuery来实现发送验证码的功能，并结合60秒倒计时的设计，确保用户在接收到验证码后有足够时间输入，同时避免短时间内重复发送验证码。以下是对这段代码的详细解析： 首先，引入jQuery库...
此外，它也可以用来实现动态效果，如验证码倒计时功能。 3. **Bootstrap**： Bootstrap是流行的前端开发框架，提供了一套响应式设计和移动设备优先的HTML、CSS及JS组件。在这个项目中，Bootstrap可能用于构建...
在这个“jQuery三级城市联动带手机验证码表单验证”的示例中，我们将深入探讨如何利用jQuery实现一系列功能，包括三级城市选择的联动效果、手机验证码的验证以及整个表单的验证流程。 首先，`jQuery`是一个广泛使用...
这里可以实现一个简单的倒计时功能，用户获取验证码后，按钮变为禁用状态，并显示剩余时间，例如"60秒后重新发送"。倒计时可以通过设置定时器`setInterval`来实现，每秒更新剩余时间，当时间为0时，清除定时器并恢复...
成功发送后，开始倒计时，失败则处理错误。 ```javascript function sendMessage() { // ... // 生成验证码 for (var i = 0; i ; i++) { code += parseInt(Math.random() * 9).toString(); } // 发送请求 ...
本文实例讲述了jQuery实现简单的计时器功能。分享给大家供大家参考，具体如下： 在写项目的过程中遇到要前端60秒发送验证码的业务需求，于是用到计时器的功能： setInterval(function xxx(){ //业务逻辑 },隔多少...
为了避免用户在短时间内重复发送验证码导致服务器压力过大，需要在用户点击发送验证码按钮后，对该按钮进行锁定，设定一个倒计时，在倒计时结束后才能允许用户再次点击发送验证码。 2. 倒计时实现方法：倒计时功能...
此外，可能还有自定义的jQuery插件，用于扩展功能，如验证码刷新、倒计时等。 在`js`目录下，除了jQuery库本身，还可能包含其他脚本文件，如`validation.js`，这是整个验证流程的核心。它定义了各个验证步骤的逻辑...
在Spambuster App中，可能有倒计时验证码、动画提示等元素，这些都是通过JavaScript实现的。 7. **第三方库和框架**：Shopify Spambuster App可能使用了JavaScript社区中的第三方库和框架，如jQuery、React或Vue.js...
4. **交互性**：为了增加用户的参与度，开发者可能会使用JavaScript或jQuery来添加动态效果，比如倒计时、滑动显示更多信息、表单验证等。用户可以通过点击按钮或输入邮箱地址来订阅更新，这需要编写相应的事件监听...