MIverification

功能描述

实现验证码功能

依赖的模块

快速使用

相关html 结构 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样式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;