$('#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. 小D课堂 - 零基础入门SpringBoot2.X到实战_第5节 SpringBoot部署war项目到tomcat9和启动原理讲解_22、SpringBoot启动方式和部署war项目到tomcat9

    笔记 1.SpringBoot启动方式讲解和部署war项目到tomcat9 简介:SpringBoot常见启动方式讲解和部署war项目Tomcat 1.ide启动     2.jar包方式启动    ...

  2. script 命令/方法/函数

    $redis->script('load', $script); $redis->script('flush'); $redis->script('kill'); $redis-&g ...

  3. DbSet.Attach(实体)与DbContext.Entry(实体).State = EntityState.Modified 区别

    当你使用这个DbSet.Update方法时,实体框架将你实体的所有属性标记为EntityState.Modified,所以跟踪它们.如果你只想更改部分属性,而不是全部属性,请使用DbSet.Attac ...

  4. 【转】asp获取【微信公众平台】Access Token的源代码下载

    在做微信开发时候,经常要用到Access Token,但是官网提供的都是基于php写的,我用asp写了,有需要可以直接复制去用,模板消息,jdk上传图片,客服消息等全需要这个:'获取 access_t ...

  5. 泡泡一分钟: A Linear Least Square Initialization Method for 3D Pose Graph Optimization Problem

    张宁 A Linear Least Square Initialization Method for 3D Pose Graph Optimization Problem "链接:https ...

  6. ES6深入浅出-10 ES6新增的数据类型-3.其他类型

    Map类型 Map 类型 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map Ma ...

  7. css样式圆角和一定的透明度

    css样式里可以用border-radius把div或图片变成带有一定圆角的,如果是div本身是正方形,设置圆角度是百分之五十,就是圆形. border-radius:值可以是具体的px数值,也可以是 ...

  8. 高级UI-SVG

    栅格图可以实现图片的清晰显示,但这也意味着如果要在各种设备上使用栅格图,那么在使用的时候就会产生为了适配各种尺寸的设备而增加大量不同规格的栅格图,这也直接导致了资源文件体积的增大,矢量图就不存在这个问 ...

  9. SpringBoot部署到Linux上AppserverApplication,访问不到控制层

    放在本地是好好的,可以请求到,放到Linux上去的话就直接404, 解决办法: SpringBoot有个加载类叫AppserverApplication.这个大家应该都知道,我们平常都是如下写: @S ...

  10. LeetCode 198. 打家劫舍(House Robber) 5

    198. 打家劫舍 198. House Robber 题目描述 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两 ...