60短信倒计时jquery的2中方法

最新推荐文章于 2025-07-24 15:02:12 发布

原创最新推荐文章于 2025-07-24 15:02:12 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了使用HTML、JavaScript及jQuery实现的两种不同方式的倒计时按钮效果，第一种适用于网页中的按钮元素，第二种则适用于输入型按钮。通过设置定时器自动减少倒计时时间并更新按钮状态，实现验证码或邮件发送后的重新获取限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、第一种：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#btn").click(function () {
                settime(this)
            });

            var countdown = 60;

            function settime(obj) {
                if (countdown == 0) {
                    obj.removeAttribute("disabled");
                    obj.innerHTML = "获取验证码";
                    countdown = 60;
                    return;
                } else {
                    obj.setAttribute("disabled", true);
                    obj.innerHTML = "" + countdown + "秒后再获取";
                    countdown--;
                }
                setTimeout(function () {
                    settime(obj)
                }, 1000)
            }
        });

    </script>
</head>
<body>

<button id="btn">获取验证码</button>

</body>
</html>

2、第二种

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var countdown=60;
        function sendemail(){
            var obj = $("#btn");
            settime(obj);

        }
        function settime(obj) {
            if (countdown == 0) {
                obj.attr('disabled',false);
                obj.val("免费获取验证码");
                countdown = 60;
                return;
            } else {
                obj.attr('disabled',true);
                obj.val("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(function() {
                        settime(obj) }
                    ,1000)
        }
    </script>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="sendemail()" />

</body>
</html>