短信倒计时原创

深处莫神

发布于 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>

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

其他

标签

已于2022-8-15 11:23:55修改