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

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

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

比如:

image.png

正如上图所示那样-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)
    }
}
目录
相关文章
|
2月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
32 1
|
9天前
|
JavaScript 前端开发
JS判断点击是单击还是双击
如何使用JavaScript判断用户点击是单击还是双击。
25 0
|
2月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
29 2
|
2月前
|
JavaScript 前端开发 Java
JavaScript内存泄露大揭秘!你的应用为何频频“爆内存”?点击解锁救星秘籍!
【8月更文挑战第23天】在Web前端开发中,JavaScript是构建动态网页的关键技术。然而,随着应用复杂度增加,内存管理变得至关重要。本文探讨了JavaScript中常见的内存泄露原因,包括意外的全局变量、不当使用的闭包、未清除的定时器、未清理的DOM元素引用及第三方库引发的内存泄露。通过了解这些问题并采取相应措施,开发者可以有效避免内存泄露,提高应用性能。
33 1
|
2月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
17 1
|
2月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
17 1
|
2月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
30 0
|
2月前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
2月前
|
JavaScript 索引
js倒计时功能
js倒计时功能
32 0
|
Web App开发 JSON JavaScript
JavaScript及jQuery入门 【下】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入