JavaScript实现发送短信验证码

HTML代码

<input type="number">
<button>发送验证码</button>

JavaScript代码

var btn = document.querySelector('button'); //获取点击按钮
var time = 3; //定义剩下的秒数
var timer = null; //定义定时器的名称
btn.addEventListener('click', function() {
    
    
    btn.disabled = true; //点击按钮实现禁用
    timer = setInterval(() => {
    
    
         if (time == 0) {
    
     //如果时间到了就清除定时器并复原按钮
            clearInterval(timer); //清除定时器
            btn.disabled = false; //复原按钮可点击
            btn.innerHTML = '发送验证码';
            time = 3; //结束一轮复原time
         } else {
    
    
            btn.innerHTML = '还剩下' + time + '秒';
            time--; //没变化一次时间减一秒
         }
    }, 1000);
})

效果