MIverification

功能描述

实现验证码功能

依赖的模块

快速使用

  相关html 结构

    <div class="code">                                          --------------  一级结构 
    <div class="code-one">                                            --------------  二级结构 
      <input type="text" value="  请输入验证码" class="input" id="input" /><button id="bt01" class="verification">验证码</button>    -----------三级结构
    </div>
    <div class="code-one">
      <input type="text" value="  请输入验证码" class="input" id="input_a" /><button id="bt02" class="verification-yellow">获取验证码</button>
    </div>
  </div> 
  主要css样式

    .input                        标准输入框样式
    .input-blue                  蓝色字体输入框样式
    .input-red                  红色字体输入框样式
    .verification              验证码按钮绿色
    .verification-yellow      验证码按钮黄色
    .verification-rosered      验证码按钮玫瑰红色
    .verification-orange      验证码按钮橙色
    .verification-blue          验证码按钮蓝色
    .verification-red          验证码按钮红色
  验证码按钮js

    var bt01 = document.getElementById("bt01");        获取id
    bt01.onclick = function () {                    点击事件
      bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮
      var time = 60;  //倒计时60秒
      var timer = setInterval(fun1, 1000);  //设置定时器
        function fun1() {
        time--;
        if (time >= 0) {
          bt01.innerHTML = time+'s';
        } else {
          bt01.innerHTML = '重新发送验证码';
          bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮
          clearTimeout(timer);  //清除定时器
          time = 60;  //设置循环重新开始条件
        }
      }
    }

特别说明

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