首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现

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

作者头像
谙忆
发布于 2021-01-21 10:23:25
发布于 2021-01-21 10:23:25
3.1K0
举报
文章被收录于专栏:程序编程之旅程序编程之旅

转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】

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

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

代码语言:javascript
复制
<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代码实现:

代码语言:javascript
复制
<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)
    }
}

本文章由[谙忆]编写, 所有权利保留。

转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/10/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档