您现在的位置是：网站首页> 编程资料编程资料
javascript实现发送短信验证码案例_javascript技巧_
2023-05-24
416人已围观
简介 javascript实现发送短信验证码案例_javascript技巧_
本文实例为大家分享了javascript实现发送短信验证码的具体代码，供大家参考，具体内容如下
效果如下:
代码思路:
1.按钮点击之后，会禁用disabled 为true
2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改里面秒数 是有变化的，因此需要用到定时器
3.定义一个变量，在定时器里面，不断递减
4.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态。
html部分
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) })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
