js实现倒计时

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

一、功能分析
按钮点击之后，会禁用按钮，disable为true。
同时按钮里面的内容发生变化，button里面的内容通过innerHTML修改。
同时秒数发送变化，所以我们需要用到定时器。
定义一个变量在定时器里面不断的递减。
如果变量为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);
			})