ajax实现发送邮件验证码倒计时功能
作者：互联网
1.实现的效果：
2.前台页面+js
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div class="sign_s2" style="display: none;"> 9 <form action="" method="post"> 10 <h3>找回密码</h3> 11 <div class="sign_cc"> 12 <dl> 13 <dt> 14 <font>*</font> 邮箱 15 </dt> 16 <dd><input type="text" placeholder="请输入您的邮箱" name="email" id="emails"></dd> 17 </dl> 18 <dl class="dl1"> 19 <dt> 20 <font>*</font> 验证码 21 </dt> 22 <dd> 23 <input type="text" name="emcode" id="emcode" placeholder="请输入验证码"> 24 <i> 25 <button type="button" class="layui-btn layui-btn-normal" style="height: 45px;width: 113px;background-color: #bd2e32;"id="sends">获取验证码</button> 26 </i> 27 </dd> 28 </dl> 29 <dl> 30 <dt> 31 <font>*</font> 新密码 32 </dt> 33 <dd><input type="password" placeholder="请输入您的新密码" name="password" id="newspass"></dd> 34 </dl> 35 </div> 36 <div class="btns"> 37 <button type="submit" id="ups">修改密码</button> 38 </div> 39 </form> 40 </div> 41 </body> 42 </html>
直接放在ajax里面：
1 //倒计时
2 let btn = document.querySelector('#sends');
3 var timer;
4 var a = 30;
5 // btn.addEventListener('click', function () {//给btn绑定点击事件
6 btn.disabled = true;//设置禁用
7 timer = setInterval(function () {//计时器
8 if (a == 0) {
9 btn.innerHTML = '获取验证码';//从新赋值
10 btn.disabled = false;//设置按钮不禁用
11 clearInterval(timer)//满足条件清楚定时器
12 a=30;//从新赋值
13 } else {
14 btn.innerHTML = '剩余' + a + '秒';//计时赋值操作
15 a--;
16 }
17 }, 1000)
18 // })
标签：disabled,30,验证码,timer,倒计时,ajax,btn,赋值 来源： https://www.cnblogs.com/mo3408/p/16664146.html