短信倒计时原创

深处莫神

发布于 2022-8-15 11:23

浏览

0收藏

短信倒计时-鸿蒙开发者社区

短信倒计时

思路：
1.获取Input框输入值，需要对去除两边空白后的内容进行正则验证，判断手机号码是否符合规范
2.test(正则内容)验证后返回true,false
3.设置按钮倒计时，设置默认sec=60,点击后开始计数，倒计时按钮为禁用状态，
4.封装倒计时函数，获取数字，即btn按钮的内容，设置定时器，如果倒计时小于0就恢复倒计时，重新验证码发送，否则就倒计时减减

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            height: 25px;
            line-height: 25px;
            font-size: 1.2em;
        }

        button {
            width: 120px;
            height: 30px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>短信验证码倒计时</h1>
    <input type="text" name="moblie" id="moblie" value="13595924575" placeholder="请输入手机号码" required>
    <button id="btn">发送验证码</button>
</body>

</html>
<script src="./assets/js/jquery.js"></script>
<script>
    // 默认秒数
    var sec = 60

    $("#btn").click(function () {
        //js 是 用 value属性获取值
        //jq  是 用 val() 方法获取值
        var moblie = $("input[name=moblie]").val()
        moblie = $.trim(moblie)
        // console.log(moblie)

        // 验证手机号码和格式是否正确
        var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

        if (!reg.test(moblie)) {
            alert('手机号码格式错误')
            return false
        }

        // 给按钮设置倒计时
        $("#btn").text(sec)
        $("#btn").attr('disabled', true)

        // 倒计时
        var T = setInterval(function () {
            var num = $("#btn").text()
            num = parseInt(num)
            console.log(num)

            if (num <= 0) {
                $('#btn').text("重新发送验证码")
                $("#btn").attr('disabled', false)
                clearInterval(T)
            }
            else {
                $('#btn').text(--num)
            }
        }, 20)


    })
</script>
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.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.