MIverification

功能描述

  1. 实现验证码功能

依赖的模块

快速使用

  1.   相关html 结构
  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> 
  11.   主要css样式
  13.     .input                        标准输入框样式
  14.     .input-blue                  蓝色字体输入框样式
  15.     .input-red                  红色字体输入框样式
  16.     .verification              验证码按钮绿色
  17.     .verification-yellow      验证码按钮黄色
  18.     .verification-rosered      验证码按钮玫瑰红色
  19.     .verification-orange      验证码按钮橙色
  20.     .verification-blue          验证码按钮蓝色
  21.     .verification-red          验证码按钮红色
  22.   验证码按钮js
  24.     var bt01 = document.getElementById("bt01");        获取id
  25.     bt01.onclick = function () {                    点击事件
  26.       bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮
  27.       var time = 60;  //倒计时60秒
  28.       var timer = setInterval(fun1, 1000);  //设置定时器
  29.         function fun1() {
  30.         time--;
  31.         if (time >= 0) {
  32.           bt01.innerHTML = time+'s';
  33.         } else {
  34.           bt01.innerHTML = '重新发送验证码';
  35.           bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮
  36.           clearTimeout(timer);  //清除定时器
  37.           time = 60;  //设置循环重新开始条件
  38.         }
  39.       }
  40.     }

特别说明

1.按钮的宽度是固定的，也可以把按钮的宽度设置成auto;