jQuery-验证码倒计时的实现

点击发送验证码，通常需要加入倒计时功能，HTML如下：

1 <center class='block captchaArea'>
2     <input class="input pwd" type="text" placeholder="请输入验证码">
3     <span class="captcha">获取验证码</span>
4     <span class="num"></span>
5 </center>

JS如下：

 1 $(".captcha").click(function () {
 2     $(".captcha").hide()
 3     $(".num").show()
 4     var second = 30
 5     $(".num").text((second) + "秒")
 6     var interval = setInterval(function () {
 7         second--
 8         $(".num").text((second) + "秒")
 9         if (second === -1) {
10             $(".captcha").text("重发验证码")
11             clearInterval(interval)
12             $(".num").hide()
13             $(".captcha").show()
14         }
15     }, 1000)
16 })

要点如下：

1.使用captcha和num分别切换显示隐藏，是为了防止captcha被再次点击，再次触发点击事件，造成倒计时混乱。

2.当second=-1时，清除定时器（clearInterval），并将captcha改内容为重发验证码。

posted @ 2019-12-04 11:27  罗毅豪  阅读(2085)  评论(0)  编辑  收藏  举报