js发送短信验证码
Favour72 人气:0效果如下:
代码思路:
1.按钮点击之后,会禁用disabled 为true
2.同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改里面秒数 是有变化的,因此需要用到定时器
3.定义一个变量,在定时器里面,不断递减
4.如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态。
html部分
<div> <input type="tel" placeholder="验证码"><button>发送</button> </div>
css部分:
div { width: 570px; height: 200px; margin: 200px auto; font-size: 22px; } input { float: left; width: 180px; height: 25px; outline: none; border: 1px solid pink; padding-left: 10px; } button { float: left; width: 60px; height: 29px; line-height: 29px; outline: none; border: 1px solid pink; }
javascript部分
let btn = document.querySelector("button"); let time = 10; btn.addEventListener('click', function () { btn.disabled = true; let timer = setInterval(function () { if (time == 0) { // 清除定时器和复原按钮 btn.disabled = false; clearInterval(timer); btn.innerHTML = "发送"; time = 10; //这个10需要重新开始 } else { btn.innerHTML = time + "s" time--; } }, 1000) })
加载全部内容