设计发送验证码案例
DOM部分学习以后,设计一个发送验证码,老样子,先分析,再写代码…
案例分析:
- 首先搭建好结构,一个输入框一个按钮,按钮上给个值为点击发送验证码
- 点击以后禁用按钮
- 点击按钮,按钮上的内容变成,倒计时锁多少秒
- 设置一个定时器,每隔一秒执行一次,让倒计时减一
- 判断验证当前倒计时是否已经小于0,如果小于0,那么清除定时器,并且给定时器设置初始内容以及倒计时的初始时间,并且把禁用的按钮给调回来,用:
btn.disabled = flase;
来实现 - 如果当前倒计时大于0,那么让时间不断减一即可
直接上代码:
<input type="text" name="" id="">
<button>发送验证码</button>
<script>
var btn = document.querySelector('button');
var time = 10; // 初始倒计时值
btn.addEventListener('click', function() {
this.disabled = 'true'; // 点击以后就禁用按钮
var timer = setInterval(function() { // 设计定时器
if (time == 0) {
// 清除定时器,复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
// 重新设置时间,设置为初始时间
time = 10;
} else {
btn.innerHTML = '倒计时还剩' + time + '秒';
time--;
}
}, 1000);
});
</script>
不断复盘,不断优秀,让自己成为镜子里想成为的那个人.关注三连,持续更新~~~