mui短信验证码倒计时实现

今天的笔记是短信验证码的倒计时实现，关于倒计时的代码网上有很多例子。如有雷同，纯属巧合哈。整个前端采用的是mui框架写的，之所以选择这个框架，也是波波不善于前端布局，先看下注册界面的效果图吧。

预览图：

mui短信验证码倒计时

倒计时代码片段：

  1. ....
  2. var getSmsBtn = document.getElementById('getSmsCode');
  3. .....
  4. function freshBtn(num){
  5.     num--;
  6.     if(num == 0){
  7.         getSmsBtn.value = "重新发送" ;
  8.         hasSendSms = false;
  9.         num = 120;
  10.         getSmsBtn.removeAttribute("disabled");
  11.         return false;
  12.     }else{
  13.         //var sec_counts = 120-num;
  14.         getSmsBtn.value = "获取验证码("+num+")";
  15.     }
  16.     setTimeout("freshBtn("+num+")",1000);
  17. }

省略号表示前后都有代码。使用的时候只需要写在开始倒计时的位置写一行，freshBtn(120)即可。当然也可以根据自己情况改成其他数字。

需要注意的是网页上面的按钮只要涉及数据请求的，尽量做点击限制，避免重复发送请求！！！

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！