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;

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18