MIverification

功能描述

依赖的模块

快速使用

  3.     <div class="code">                                          --------------  一级结构 
  4.     <div class="code-one">                                            --------------  二级结构 
  5.       <input type="text" value="  请输入验证码" class="input" id="input" /><button id="bt01" class="verification">验证码</button>    -----------三级结构
  6.     </div>
  7.     <div class="code-one">
  8.       <input type="text" value="  请输入验证码" class="input" id="input_a" /><button id="bt02" class="verification-yellow">获取验证码</button>
  9.     </div>
  10.   </div> 
  12.     .input                        标准输入框样式
  14.     .input-red                  红色字体输入框样式
  15.     .verification              验证码按钮绿色
  16.     .verification-yellow      验证码按钮黄色
  17.     .verification-rosered      验证码按钮玫瑰红色
  18.     .verification-orange      验证码按钮橙色
  19.     .verification-blue          验证码按钮蓝色
  20.     .verification-red          验证码按钮红色
  21.   验证码按钮js
  23.     var bt01 = document.getElementById("bt01");        获取id
  24.     bt01.onclick = function () {                    点击事件
  26.       var timer = setInterval(fun1, 1000);  //设置定时器
  27.         function fun1() {
  28.         time--;
  29.         if (time >= 0) {
  30.           bt01.innerHTML = time+'s';
  31.         } else {
  32.           bt01.innerHTML = '重新发送验证码';
  33.           bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮
  34.           clearTimeout(timer);  //清除定时器
  35.           time = 60;  //设置循环重新开始条件
  36.         }
  37.       }

特别说明