本文实例为大家分享了javascript实现发送短信验证码的具体代码,供大家参考,具体内容如下 效果如下: 代码思路: 1.按钮点击之后,会禁用disabled 为true2.同时
本文实例为大家分享了javascript实现发送短信验证码的具体代码,供大家参考,具体内容如下
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)
})
--结束END--
本文标题: javascript实现发送短信验证码案例
本文链接: https://www.lsjlt.com/news/153274.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0