倒计时发送短信案例
案例分析:
①按钮点击之后,会禁用按钮 disabled=true;
②同时按钮里面的内容会变化,注意button 里面的内容是通过 innerHTML修改
③里面秒数是变化的,因此需要用到定时器
④定义一个变量,在定时器里面,不断递减
⑤如果变量为0,说明到了时间,需要停止定时器,并且复原按钮初始状态
1,第一步:按钮点击之后,禁用按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 手机号码: <input type="number"> <button>发送</button> <script> // 按钮点击之后,会禁用 disabled 为true // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改 // 里面秒数是有变化的,因此需要用到定时器 // 定义一个变量,在定时器里面,不断递减 // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态 var btn=document.querySelector("button"); btn.addEventListener('click',function(){ btn.disabled=true; }) </script> </body> </html>
2,第二步: 按钮里面的内容 改为 “ 还剩下 5,4,3,2,1 秒”
var btn=document.querySelector("button"); btn.addEventListener('click',function(){ var time=5; timer=setInterval(function(){ btn.disabled=true; btn.innerHTML="还剩下"+time+"秒“; time--; },1000) })
3,第三步,当时间变成0秒,要清除定时器,并且按钮恢复到原来的状态
timer=setInterval(function(){ if(time==0) { clearInterval(timer); btn.disabled=false; btn.innerHTML="发送"; time=5; } else{ btn.innerHTML=”还剩下"+time"+“秒"; time--; } },1000)
一个bug:
当时间变为0之后,按钮恢复到原来的状态,如果想要再次点击”发送“按钮,就需要把时间重新设置为" time=5", 可是这行代码放在时间为0的判断下,到了0之后,不需要点击,自动就会从5开始倒计时
原因:定时器没有清除掉,clearInterval(timer) 中的timer写错了,写成了time 。。。。。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步