这个主要是用在手机验证码注册的时候用的多,
比如:

按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现

正如上图所示那样-60S后还会还原、
直接上代码:


<input type="button" id='codeBtn' value="免费获取验证码"></input>
<script src="js/reg.js"></script>
//(我是分开写的--后面的代码我是导入的)
var wait = 60;
function time(btn) {
    if(wait == 0) {
        btn.removeAttribute("disabled");
        btn.value = "免费获取验证码";
        wait = 60;
    } else {
        btn.setAttribute("disabled", true);
        btn.value = "重新发送(" + wait + ")";
        wait--;
        setTimeout(function() {
                time(btn)
            },
            1000)
    }
}
document.getElementById("codeBtn").onclick = function() {
    time(this);
}


JQuery代码实现:


<input type="button" id="btn" value="免费获取验证码" />

//(我是分开写的--后面的代码我是导入的)

$(function() {
    $(function() {
        $("#btn").click(settime);
    });
});
var countdown = 60;
function settime() {
    if(countdown == 0) {
        $("#btn").attr("disabled", false);
        $("#btn").attr("value", "免费获取验证码");
        countdown = 60;
    } else {
        $("#btn").attr("disabled", true);
        $("#btn").attr("value", "重新发送(" + countdown + ")");
        countdown--;
    }
    setTimeout(settime, 1000)
}


相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-11-16
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-12-22
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-25
相关资源
相似解决方案