黑马程序员技术交流社区

标题: 简单实用短信验证倒计时功能 [打印本页]

作者: mangoboy 时间: 2018-9-22 15:24
标题: 简单实用短信验证倒计时功能
本帖最后由 mangoboy 于 2018-9-22 15:51 编辑

第一步：下载jquery.js 附：http://code.jquery.com/jquery-2.1.4.min.js 第二步：编写页面代码，引入jquery.min.js如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">// 第二步：换成你的本地jq资源路径
<script src="js/jquery.min.js"></script>
<body>
<input type="text" name="tel" placeholder="请输入你的手机号码" />
<input type="button" id="btn" value="获取验证码" />
</body>
</html>

第三步：
为你的发送验证码按钮绑定事件
<script type="text/javascript">
// 初始化倒计时时间
var countdown=60;
function sendMsmCode(){
var dom = $("#btn");
settime(dom);
}
//发送验证码倒计时
function settime(dom) {
// 倒计时结束出口
if (countdown == 0) {
      dom.attr('disabled',false);
      //dom.removeattr("disabled");
      dom.val("获取验证码");
      countdown = 60;
      return;
} else {
      // 正在倒计时中
      dom.attr('disabled',true);
      dom.val("重新发送(" + countdown + ")");
      countdown--;
}
// 每一秒执行一次
setTimeout(function() {
      settime(dom)
},1000)
}
</script>

效果如下：
点击前

点击后

微信图片_20180922152135.png (7.99 KB, 下载次数: 53)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2