$('#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. Visual Studio 2019更新到16.2.3

    Visual Studio 2019更新到16.2.3   此次更新,包括以下内容: (1)修复找不到Android SDK的bug. (2)修复安装结束后,无法启动的bug. (3)修复关闭VS时, ...

  2. 将移远通信的EC20驱动移植到NUC972上(转)

    源: 将移远通信的EC20驱动移植到NUC972上

  3. 泡泡一分钟:Robust and Fast 3D Scan Alignment Using Mutual Information

    Robust and Fast 3D Scan Alignment Using Mutual Information 使用互信息进行稳健快速的三维扫描对准 https://arxiv.org/pdf/ ...

  4. Spring cloud微服务安全实战-4-1章节概述

    过渡到复杂的微服务场景下面. 搭建起一个简单的微服务架构,一个网关,一个安全中心,两个微服务,然后会看到如何将安全相关的问题解构出来放在网关上. 然后与OAuth协议整合起来.

  5. 标量子查询调优SQL

    fxnjbmhkk4pp4 select /*+ leading (wb,sb,qw) */ 'blocker('||wb.holding_session||':'||sb.username||')- ...

  6. PAT 甲级 1072 Gas Station (30 分)(dijstra)

    1072 Gas Station (30 分)   A gas station has to be built at such a location that the minimum distance ...

  7. Spring Cloud 如何使用Eureka注册服务 4.2.2

    要使用Eureka实现服务发现,需要项目中包含Eureka的服务端发现组件以及客户端发现组件. 搭建Maven父工程 创建一个Maven父工程xcservice-springcloud,并在工程的po ...

  8. spring 使用@Bean装配Bean

    通过@Component装配Bean,但是@Component只能注解在类上,不能注解到方法上.对于Java而言,大部分的开发都需要引入第三方的包(jar文件),而且往往并没有这些包的源码,这时候将无 ...

  9. Python - Django - 装饰器版的登陆校验

    urls.py: from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^login/', vi ...

  10. HR数据分析常用的50个公式

    HR数据分析常用的50个公式 HR经常需要和数据打交道,如入职率.离职率.加班费计算等.虽然日常工作中,单个数据的计算并不麻烦,但几十上百个累计在一起,确实很容易混淆,甚至计算失误.今天小编急HR之所 ...