$('#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. 网站安全统一监测平台(WebPecker)

    网站安全统一监测平台(WebPecker)_智恒科技http://www.zhihengit.com/html/pro/chanpinfenlei1/2016/0511/135.html [SQL注入 ...

  2. Tomcat清理无用应用防止漏洞

    /webapps/host-manager /home/renguoqiang /webapps/manager /home/renguoqiang /webapps/host-manager rm ...

  3. python清理docker-harbor的多余镜像

    # coding: utf-8 from operator import itemgetter from urllib import parse import requests import date ...

  4. 解决 service iptables save 报错 please try to use systemctl

    本文档根据 service iptables save 报错 please try to use systemctl 提供解决方案.报错 [root@Jaking ~]# service iptabl ...

  5. spark ml pipeline构建机器学习任务

    一.关于spark ml pipeline与机器学习一个典型的机器学习构建包含若干个过程 1.源数据ETL 2.数据预处理 3.特征选取 4.模型训练与验证 以上四个步骤可以抽象为一个包括多个步骤的流 ...

  6. java-mybaits-016-mybatis知识点StatementType

    1.statementType 在mapper文件中可以使用statementType标记使用什么的对象操作SQL语句. statementType:标记操作SQL的对象 要实现动态传入表名.列名,需 ...

  7. osg编译日志-release

    1>------ 已启动生成: 项目: ZERO_CHECK, 配置: Release x64 ------1> Checking Build System1> CMake does ...

  8. 软件定义网络基础---SDN的核心思想

    一:SDN包含的核心思想:解耦,抽象,可编程 二:解耦 (一)SDN网络解耦思想 解耦是指将控制平面和数据平面进行分离,主要为了解决传统网络中控制平面和数据平面在物理上紧耦合导致的问题 控制平面和数据 ...

  9. 基于Python的WEB接口开发与自动化测试 pdf(内含书签)

    基于Python的WEB接口开发与自动化测试 目录 目 录O V目 录章 Python 学习必知 ................................................... ...

  10. mysql的驱动类com.mysql.jdbc.Driver过时了,需要用com.mysql.cj.jdbc.Driver代替

    springboot项目整合mybatis,配置文件如下: server: port: 8081 mybatis: config-location: classpath:mybatis/mybatis ...