jquery实现验证码倒计时60秒

来源：互联网发布：金正恩结局知乎编辑：程序博客网时间：2024/05/17 01:27

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/jquery.min.js" type="text/javascript"></script></head><body><input type="text" name=""><input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></body><script type="text/javascript">/*-------------------------------------------*/var InterValObj; //timer变量，控制时间var count = 60; //间隔函数，1秒执行var curCount = 60;//当前剩余秒数var code = ""; //验证码var codeLength = 6;//验证码长度function sendMessage() {curCount = count;var dealType; //验证方式var uid=$("#uid").val();//用户uidif ($("#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秒执行一次}//timer处理函数function SetRemainTime() {if (curCount == 0) {               window.clearInterval(InterValObj);//停止计时器$("#btnSendCode").removeAttr("disabled");//启用按钮$("#btnSendCode").val("重新发送验证码");code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效   } else {curCount--;$("#btnSendCode").val(curCount + "秒后重新获取");}}</script></body></html>

上面就是很简单的直接使用jquery来实现倒计时的功能。

其实整个过程主要用到了两个js函数：setTimeOut()和setInterval()，或者看两种的关系

特别计数结束后，要调用clearInterval()来停止计数。

这个是文章内容的出处点击打开链接

阅读全文

0 0