$('#btn').click(function(){

//设置按钮倒计时
$(this).addClass('disabled'); //把按钮变灰
$(this).attr('disabled', true); //把按钮变灰
var time = 10;
$(this).text(time + 's'); //把按钮变成秒数显示
var interval = setInterval(() => {
if(time <= 0){
clearInterval(interval); //清楚倒计时
$(this).removeClass('disabled'); //把灰色按钮变成还原
$(this).attr('disabled', false); //把灰色按钮变成还原
$(this).text('发送验证码'); //把灰色按钮变成还原
return false;
}
time --; //时间自动减1
$(this).text(time + 's'); //把按钮变成秒数显示 自动减1后的
}, 1000); //每秒执行一下 });

  

javascript -- 把按钮变成读秒倒计时的更多相关文章

  1. JavaScript插件——按钮

    Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  2. 用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”

    倒计时——从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text& ...

  3. Vue——手机号、验证码登录(设置按钮60s禁用倒计时)

    最近在做一个Vue项目,前端通过手机号.验证码登录,获取验证码按钮需要设置60s倒计时(点击一次后,一分钟内不得再次点击).先看一下效果图: 输入正确格式的手机号码后,“获取验证码”按钮方可点击:点击 ...

  4. JavaScript + PHP 实现刷新继续保持倒计时的按钮

    场景:发送一个验证码到手机,当验证码发出时,会提示隔 1 分钟之后可以再次发送.通常有这几种方式防止恶意请求,一是再次发送之前需要输入验证码,二是在指定的时间间隔之内不能再次发送. 有些网站在 1 分 ...

  5. JQuery 解决按钮上的倒计时问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. 菜鸟学JS(四)——javascript为按钮注册回车事件(设置默认按钮)

    不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今 ...

  8. jquery 实现点击按钮后出现倒计时效果(用于实现发送手机验证码、邮箱验证码)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

随机推荐

  1. nginx: [emerg] open() "/var/run/nginx.pid" failed (13: Permission denied)

    现象 1.centos6.9 用rpm包安装nginx 2.修改Nginx的多个配置文件和配置项 3.service nginx restart 报错: nginx: [emerg] open() & ...

  2. tomcat NIOEndpoint中的Acceptor实现

    EndPoint的组件就是属于连接器Connector里面的.它是一个通信的端点,就是负责对外实现TCP/IP协议.EndPoint是个接口,它的具体实现类就是AbstractEndpoint,而Ab ...

  3. 【转载】 180623 Conda install 本地压缩包文件tar.bz2

    原文地址“ https://blog.csdn.net/qq_33039859/article/details/80785535 ----------------------------------- ...

  4. Linux 在 TOP 命令中切换内存的显示单位

    顶部的内存信息可以在top运行时按E切换,每次切换转换率为1000,只是没有单位,切换的单位为 k,m,g,t,p: 1. 2. 3., 4. 底下的进程信息按e切换,每次切换转换率为1000,切换的 ...

  5. 003-结构型-07-享元模式(Flyweight)

    一.概述 提供了减少对象数且从而改善应用所需的对象结构的方式.运用共享技术有效地支持大是细粒度的对象. 它通过与其他类似对象共享数据来减小内存占用.它使用共享物件,用来尽可能减少内存使用量以及分享资讯 ...

  6. Python数据抓取技术与实战 pdf

    Python数据抓取技术与实战 目录 D11章Python基础1.1Python安装1.2安装pip1.3如何查看帮助1.4D1一个实例1.5文件操作1.6循环1.7异常1.8元组1.9列表1.10字 ...

  7. AD 常用策略

    配置WSUS 配置NTPS 配置用户配置文件漫游 配置漫游区磁盘配额 配置修改本地管理员用户名 配置修改本地管理员密码 配置网络验证(提示是否联网错误) 配置允许开设永久共享 配置允许开设共享打印机 ...

  8. Swift编码总结1

    1. fileprivate (set) var hasSetDiscount = false中fileprivate (set)表示什么意思: //设置setter私有,但是getter为publi ...

  9. 【VS开发】开发最小化到托盘的功能

    在VC++中,想实现最小化MFC程序的时候,最小化到系统托盘,需要调用NOTIFYICONDATA类 下面我们就来讲解一下如何简单实现一个系统托盘我们以对话框程序为列 第一步:在Dlg类中//定义一个 ...

  10. formSelects隐藏功能键

    隐藏后 方法: // selectId就是select的id,这是在select渲染完后执行 $("#selectId").parent().find(".xm-sele ...