视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2020-11-27 21:51:47 责编:小采
文档


倒计时——从10倒数到0,点击按钮会还原倒计时

<body>
 <!-- 将textvalue值设为10,从10倒数 -->
 <input type="text" value="10" id="txt">
 <input type="button" value="重新开始" id="btn">
</body>
<script>
 var oT = document.getElementById("txt");
 var oB = document.getElementById("btn");
 var timer;
 //封装一个开始倒数的函数
 function start(){
 //开启计时器,每秒text框中的数值自减1
 timer = setInterval(function(){
 oT.value--;
 //当text框中的数值为0时,停止计时器
 if(oT.value<=0){
 clearInterval(timer);
 }
 },1000)
 }
 //封装一个清楚延时器的函数
 function stop(){
 clearTimeout(timer);
 }
 //当网页加载完毕时的行为如下
 window.onload = function(){
 //只要text里面的数值还未到0,则不停地以每秒减一的速度进行着
 if(oT.value>0){
 start();
 //一旦清零,就停止
 }else{
 stop();
 }
 }
 //当点击按钮时的行为
 oB.onclick = function(){
 //此处要设清除计时器,否则中断text倒数后的重新倒数将会加速,甚至会递减到负值
 clearInterval(timer);
 //点击按钮后,无论text中的数值时多少,都变为10
 oT.value = 10;
 //重复上面函数的行为
 if(oT.value>0){
 start();
 }else{
 stop();
 }
 }
</script>

知识点扩展:

 数字字母混合的4位验证码

不管是在app注册、登录里,还是在网页注册里,都会看到验证码;那这个验证码要怎么实现呢?通过js有两种方法可以达到这样的效果,下面代码奉上哦!

方法一:这个方法比较好理解,首先定义一个数组,将会产生的字母,数值都放进去;有4位就循环4次,每循环一次产生一个随机结果,将每次的结果累加起来存入想要放的位置。

var arr=['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
 //产生4位验证码
 for(var i=0;i<4;i++){
 pos=parseInt(Math.random()*(arr.length-1));
 Ophoto.value+=arr[pos];
 }
 // 验证用户输入的验证码是否正确
 Ocode.onblur = function () {
 if(Ocode.value!=Ophoto.value){
 alert("验证码输入错误");
 }
 }

方法二:这个方法也挺好理解的,产生一个随机字符库,然后开始对随机库(str)里面的字符所对应的下标进行随机,然后将随机而来的下标所对应的字符累加给另一个字符串即可。

function randomStr(){
 // 产生库
 var str = "";
 var str1 = "";
 for (var i = 0; i < 4; i++) {
 var a = random(0, 9);
 var b = String.fromCharCode(random(65, 90));
 var c = String.fromCharCode(random(97, 122));
 str1 = str1 + a + b + c;
 }
 // 开始真正的随机
 for (var i = 0; i < 4; i++) {
 str += str1[random(0, str1.length - 1)]
 }
 return str;
 }
 Ophoto.value = randomStr();
 Ocode.onblur = function () {
 if (Ocode.value != Ophoto.value) {
 alert("验证码输入错误");
 }
 }
 function random(max, min) {
 return Math.round(Math.random() * (max - min) + min);
 }

以上两种方法都可得到随机数字字母混合的4位验证码,可以都尝试着理解下,然后去敲敲看。若有其他方法,会更新哒!

总结

以上所述是小编给大家介绍的JS 实现发送短信验证码的“59秒后重新发送验证短信”功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

下载本文
显示全文
专题