开发者社区> 谙忆> 正文

按钮被点击后屏蔽点击且倒计时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

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

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

相关文章
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
70 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
84 0
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
114 0
JS中实现或退出全屏
JS中实现或退出全屏
85 0
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
201 0
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
103 0
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
52 0
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
85 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
62 0
+关注
谙忆
GitHub: https://github.com/chenhaoxiang
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多