当前位置: 首页 / 代码分享 / 正文

js实现网站手机号接收验证码倒计时60秒代码分享

发布时间:2020-06-16 23:39:41 作者:小超越君


现在网站一般都是让用户使用手机号注册或者登陆,那么对于前端来说,做一个手机号发送短信和倒计时重复发送的功能就尤其重要了!该如何做呢?

小超越工作室今天就分享一段代码给大家,可以直接拿来就用。

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

小超越
热爱折腾,曾想着改变世界,如今只能向生活低头,寻找可口的牛奶和面包
添加站长微信作者头像
专注高品质湛江网站建设及湛江SEO优化服务 立即咨询