时间:2021-05-26
1.要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时。
2.先创建文本框和按钮,按钮设置对应的id,然后在js中通过id获取按钮这个元素,对其执行操作。同时应设置倒计时时间以及计时器变量,并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送。
3.倒计时结束后,清除计时器,并使文字改变为“重新发送验证码”,恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时。
<head> <meta charset="UTF-8"> <title>js发送短信验证码</title> </head> <body> <input type="text"/><button id="bt01">发送验证码</button> </body> <script type="text/javascript"> var bt01 = document.getElementById("bt01"); bt01.onclick = function() { bt01.disabled = true; //当点击后倒计时时候不能点击此按钮 var time = 5; //倒计时5秒 var timer = setInterval(fun1, 1000); //设置定时器 function fun1() { time--; if(time>=0) { bt01.innerHTML = time + "s后重新发送"; }else{ bt01.innerHTML = "重新发送验证码"; bt01.disabled = false; //倒计时结束能够重新点击发送的按钮 clearTimeout(timer); //清除定时器 time = 5; //设置循环重新开始条件 } } } </script>总结
以上所述是小编给大家介绍的JS实现简单短信验证码界面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
相关阅读:基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂。具体代
本文介绍了用LaravelSms实现laravel短信验证码的发送的实现,分享给大家,具体如下:阿里云短信服务使用LaravelSms这个扩展包实现短信验证码的
手机验证码平台有阿里短信验证码平台、飞码验证码接收平台、一片云验证码平台等等。 验证码平台是指网站或者客户端应用需要接入短信验证码(手机验证码)的功能,可以实
html代码:复制代码代码如下:简单验证码验证码:yzm()看不清请输入验证码JS代码:复制代码代码如下:functionchkyzm(form){//对验证码
一个包含用户名,密码,验证码的简单的登陆界面,如下图所示:首先是HTML代码:账号密码验证码然后是实现验证用户的输入是否正确的JS代码://文本框默认提示文字f