现在网站一般都是让用户使用手机号注册或者登陆，那么对于前端来说，做一个手机号发送短信和倒计时重复发送的功能就尤其重要了！该如何做呢？
小超越工作室今天就分享一段代码给大家，可以直接拿来就用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小超越验证码60秒倒计时功能演示</title> </head> <body> <button onclick="get_verCode()" id="code">获取验证码</button> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var wait=60; function time() { if (wait == 0) { $("#code").removeAttr("disabled"); $("#code").text("获取验证码"); wait = 60; } else { $("#code").attr('disabled',true); $("#code").text("重新发送(" + wait + ")"); wait--; setTimeout(function() { time() }, 1000) } } function get_verCode() { time(); alert("验证码已发送"); } </script> </body> </html> |
网站短信60秒倒计时实现的逻辑解析：首先定义一个60秒的wait变量，然后主要利用setTimeout来做定时调用自身，并利用html得disabled来禁用按钮，然后wait每次减1秒，直到wait变量为0停止调用自身，并重新赋值60秒即可。是不是很简单呢？快拿去试试吧~
转载请保留本文链接：https://www.zhe94.com/734.html
添加站长微信
