开发者社区> 谙忆> 正文

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

简介: 转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 这个主要是用在手机验证码注册的时候用的多, 比如: 正如上图所示那样-60S后还会还原、 直接上代码: //(我是分开写的--后面的代码...
+关注继续查看

转载请注明出处:http://blog.csdn.net/qq_26525215

本文源自大学之旅_谙忆的博客

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

正如上图所示那样-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)
    }
}

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

转载请注明出处:http://blog.csdn.net/qq_26525215

本文源自大学之旅_谙忆的博客

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js、jquery操作
28 0
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码js、jquery操作
29 0
JavaScript中的库JQuery.
JavaScript中的库JQuery.
23 0
js基础笔记学习309筛选jquery对象1
js基础笔记学习309筛选jquery对象1
7 0
js基础笔记学习312筛选jquery对象4
js基础笔记学习312筛选jquery对象4
10 0
js基础笔记学习311筛选jquery对象3
js基础笔记学习311筛选jquery对象3
8 0
js基础笔记学习310筛选jquery对象2
js基础笔记学习310筛选jquery对象2
10 0
js基础笔记学习294引入jquery
js基础笔记学习294引入jquery
20 0
【前端】用jquery或js获取select标签中选中的option值及文本
用jquery或js获取select标签中选中的option值及文本
104 0
+关注
谙忆
GitHub: https://github.com/chenhaoxiang
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载