javascript如何实现发送短信验证码

这篇文章主要介绍“javascript如何实现发送短信验证码”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“javascript如何实现发送短信验证码”文章能帮助大家解决问题。

效果如下:

代码思路:

按钮点击之后，会禁用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)    })

关于“javascript如何实现发送短信验证码”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。