ajax实现发送邮件验证码倒计时功能

2022-09-07 09:30:08 阅读：212 来源： 互联网

标签：disabled 30 验证码 timer 倒计时 ajax btn 赋值

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ajax实现发送邮件验证码倒计时功能