js实现获取验证短信倒计时功能

---

前言

今天和大家分享一个小功能，在我们进行需要获取手机验证码或其他方式的验证码进行登录时会有一个功能，就是当你点击发送验证码时会有一个倒计时，倒计时没有结束时按钮是禁用的状态，防止重复发送短信，下面我们来看一下这个功能使用JS该如何实现。

一、功能分析

1. 按钮点击之后，会禁用按钮，disable为true。
2. 同时按钮里面的内容发生变化，button里面的内容通过innerHTML修改。
3. 同时秒数发送变化，所以我们需要用到定时器。
4. 定义一个变量在定时器里面不断的递减。
5. 如果变量为0时就说明到了时间，我们需要停止定时器并且复原按钮初始状态。

二、具体实现

首先写我们的html部分:

<input type="number">
<button>获取验证码</button>

创建一个输入手机号的输入框和一个获取验证码的按钮。

再写我们的js部分：

var but = document.querySelector('button');
			var time = 10; //定义剩下的秒数
			but.addEventListener('click', function() {
    
    
				but.disabled = true;
				var timer = setInterval(function() {
    
    
					if (time == 0) {
    
    
						//清除定时器和复原按钮
						clearInterval(timer);
						but.disabled = false;
						but.innerHTML = '发送';
						time = 10; //这个10是重新开始
					} else {
    
    
						but.innerHTML = '剩余' + time + '秒';
						time--;
					}
				}, 1000);
			})

下面是没有点击时的样式：

下面是点击后的样式：

总结

我们定义的time是一个倒计时的时间，一般为60秒，这里是为了不等太长的时间设置的10秒，大家可以根据自己的需要来设置倒计时的时长。
以上就是本章的全部内容，希望能够帮助到您。