jQuery-验证码倒计时的实现

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

 <center class='block captchaArea'>

     <input class="input pwd" type="text" placeholder="请输入验证码">

     <span class="captcha">获取验证码</span>

     <span class="num"></span>

 </center>

JS如下：

 $(".captcha").click(function () {

     $(".captcha").hide()

     $(".num").show()

     var second = 30

     $(".num").text((second) + "秒")

     var interval = setInterval(function () {

         second--

         $(".num").text((second) + "秒")

         if (second === -1) {

             $(".captcha").text("重发验证码")

             clearInterval(interval)

             $(".num").hide()

             $(".captcha").show()

         }

     }, 1000)

 })

要点如下：

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

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

巴特西

jQuery-验证码倒计时的实现

最新文章

热门文章