JS短信倒计时案例

<!DOCTYPE html>
<html lang="en">
<!-- 案例分析：
1. 按钮点击之后，会变成禁用状态(disabled为ture)
2. 同时按钮里面的内容会变化,button里面的内容通过innerHTML修改
3. 按钮中的秒数发生变化，因此需要用到定时器
4. 定义一个变量，在定时器里面，不断递减
5. 如果变量为0说明到了时间，需要停止定时器，并且复原按钮初始状态 --><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}span {font-size: 10px;}input {width: 130px;height: 15px;margin-left: 20px;font-size: 10px;color: #999;}button {width: 80px;font-size: 10px;}</style>
</head><body><input type="text" placeholder='请输入手机号' id="tele"><button>获取验证码</button><script>// 获取元素var input = document.querySelector('#tele');var btn = document.querySelector('button');// 注册事件input.addEventListener('focus', function () {this.style.color = '#000';})var time = 60;  // 定义剩余秒数btn.addEventListener('click', function () {var tele = input.value;if (tele.length != 11) {  //判断输入框内容的长度是否为11位input.value = '手机号输入有误！'; //如果输入有误，则输入框以红色文本提示错误input.style.color = '#ff0000';setTimeout(function () {  // 设置定时器，在给出输入错误的提示1s后恢复原始输入状态input.value = tele;input.style.color = '#000';}, 1000)} else {this.disabled = true; // 手机号输入正确，则按钮变为禁用状态，并设置定时器var timer = setInterval(function () {if (time == 0) {// 清除定时器和复原按钮clearInterval(timer);btn.disabled = false;btn.innerHTML = '获取验证码';time = 60;  // 每次点击都需要重新开始计时} else {btn.innerHTML = '剩余' + time + '秒';time--;}}, 1000);}})</script>
</body></html>