$('#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. 【E2E】Intel AI DevCloud 的申请和登陆

    参考:https://www.cnblogs.com/WaitingForU/p/9091096.html 一.注册 https://www.cnblogs.com/WaitingForU/p/909 ...

  2. Nessus更新到8.5.0

    Nessus更新到8.5.0   此次更新,主要涉及以下变化: (1)Nessus的用户注册和激活流程进行简化.用户可以在Nessus软件中直接进行注册和激活. (2)Nessus报告生成功能得到加强 ...

  3. Visual Studio 2019更新到16.1.4

    Visual Studio 2019更新到16.1.4 此次更新仍然是修复bug为主,涉及到Xcode 11无法启动模拟器.Xamarin.Android SDK 9.3.0.23的调试bug.

  4. [原][C++]拒绝智能指针与指针混用,常见智能指针问题

    公司一个非专科的程序在开发过程中有些毛躁,但是又想使用些新学的技术 这天他正调试呢,发现有一个BUG怎么也找不到原因. 用的好好的内存怎么就突然被删除了呢,好好的指针,怎么就访问越界了呢 没办法,他只 ...

  5. 004-行为型-02-模板方法模式(Template Method)

    一.概述 定义了一个算法的骨架,并允许子类为一个或多个步骤提供实现.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法的某些步骤 1.1.适用场景 一次性实现一个算法的不变的部分,并将可变的行 ...

  6. spring 使用Spring表达式(Spring EL)

    Spring还提供了更灵活的注入方式,那就是Spring表达式,实际上Spring EL远比以上注入方式强大,我们需要学习它.Spring EL拥有很多功能. 使用Bean的id来引用Bean. •调 ...

  7. shell脚本双引号、大括号、if语句注意事项

    1.双引号的问题 变量用双引号括起来的意义 如果变量不用双引号括起来,比如echo $a,那么隐含的意义就是,把$a变量的字符串,按照空格.制表符.换行符等符号来分割开.然后把这些分割后的每一项再按 ...

  8. Andrew Ng机器学习课程10补充

    Andrew Ng机器学习课程10补充 VC dimension 讲到了如果通过最小化训练误差,使用一个具有d个参数的hypothesis class进行学习,为了学习好,一般需要参数d的线性关系个训 ...

  9. Swoole练习 安装

    仅支持 Linux,FreeBSD,MacOS,3类操作系统 Linux 内核版本 2.3.32 以上 PHP-5.3.10 以上版本,包括PHP7 gcc4.4 以上版本或者clang cmake2 ...

  10. solr关于日期范围查询

    问题:从solr上查询创建日期在2019-06-25到2019-06-26之间的数据 createDate:[2019-06-25 TO 2019-06-26]