点击发送验证码,通常需要加入倒计时功能,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改内容为重发验证码。