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

本文介绍了使用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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值