夏日博客

A-A+

一款js发送验证码计时器

2016年07月29日 前端设计 暂无评论 阅读 7 views 次

要做一款手机注册时发送验证码的计时器，也就是点击一次发送按钮，然后按钮变灰成不可点击的状态，等到指定(60秒)之后才可以再次点击，这样有效的防止了用户一直点击而产生错误，首先想到的自然就是 js 了，研究了一下午的时候，不过这个 js 和之前页面的无法整合，之前的所有注册全是 jquery，所以这个也就没用了，不过效果看起来还不错，所以先收藏起来吧，也是从网上找的，只可惜了没有 jquery 的即时返回数据的功能，也就是无法从数据库中直接读取数据直接返回，有些可惜了。

  1. <input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />   
  2. <script type="text/javascript">  
  3. var clock = '';  
  4. var nums = 10;  
  5. var btn;  
  6. function sendCode(thisBtn)  
  7. {  
  8.     //if(!document.getElementById("phone").value){  
  9.         //return false;  
  10.     //}  
  11.       
  12.     //if (document.getElementById("phone").value.replace(/(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})|(15[0-9]{9})/g, "") == document.getElementById("phone").value){ xiariboke.net  
  13.         //return (false);     
  14.     //}   
  15.   
  16. btn = thisBtn;  
  17. btn.disabled = true; //将按钮置为不可点击  
  18. //btn.style="background:red"; //背景颜色  
  19. btn.value = nums+'秒后重新获取';  
  20. clock = setInterval(doLoop, 1000); //一秒执行一次  
  21. }  
  22. function doLoop()  
  23. {  
  24. nums--;  
  25. if(nums > 0){  
  26.  btn.value = nums+'秒后重新发送';  
  27.  btn.style="background:#D7D7D7"; //背景颜色  
  28. }else{  
  29.  clearInterval(clock); //清除js定时器  
  30.  btn.style="background:#5DC9E6"; //背景颜色  
  31.  btn.disabled = false;  
  32.  btn.value = '获取验证码';  
  33.  nums = 10; //重置时间  
  34. }  
  35. }  
  36. </script>  

至于效果的话可以自己在html里面运行，不过这里建议还是使用 jquery 比较好，比较 jquery 代码量少，而且兼容性还好。

标签：

给我留言