javascript -- 把按钮变成读秒倒计时
$('#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 -- 把按钮变成读秒倒计时的更多相关文章
- JavaScript插件——按钮
Bootstrap3.0学习第二十四轮(JavaScript插件——按钮) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...
- 用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”
倒计时——从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text& ...
- Vue——手机号、验证码登录(设置按钮60s禁用倒计时)
最近在做一个Vue项目,前端通过手机号.验证码登录,获取验证码按钮需要设置60s倒计时(点击一次后,一分钟内不得再次点击).先看一下效果图: 输入正确格式的手机号码后,“获取验证码”按钮方可点击:点击 ...
- JavaScript + PHP 实现刷新继续保持倒计时的按钮
场景:发送一个验证码到手机,当验证码发出时,会提示隔 1 分钟之后可以再次发送.通常有这几种方式防止恶意请求,一是再次发送之前需要输入验证码,二是在指定的时间间隔之内不能再次发送. 有些网站在 1 分 ...
- JQuery 解决按钮上的倒计时问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JavaScript学习笔记-简单的倒计时跳转页面
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 菜鸟学JS(四)——javascript为按钮注册回车事件(设置默认按钮)
不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今 ...
- jquery 实现点击按钮后出现倒计时效果(用于实现发送手机验证码、邮箱验证码)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
随机推荐
- EDAS Serverless & Kubernetes SLB LVS Nginx
分布式缓存负载均衡的规则处理:虚拟节点对一致性哈希的改进 - yanghuahui - 博客园https://www.cnblogs.com/yanghuahui/p/3755460.html EDA ...
- 廖雪峰Git教程1
转自:https://www.liaoxuefeng.com/wiki/896043488029600 [安装Git] 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Un ...
- Error-JavaScript:SCRIPT1007: 缺少 ']'
ylbtech-Error-JavaScript:SCRIPT1007: 缺少 ']' SCRIPT1007: 缺少 ']' 1.返回顶部 · if (flag) { return eval(&quo ...
- matlab基本函数 randn,rand,orth
一起来学演化计算-matlab基本函数randn, rand, orth 觉得有用的话,欢迎一起讨论相互学习~Follow Me randn X = randn 随机从正态分布中选一个数作为结果 X ...
- 123457123457#0#-----com.tym.YuErBaiKeTYM--前拼后广--育儿百科
com.tym.YuErBaiKeTYM--前拼后广--育儿百科
- 报错:The specified datastore driver ("com.mysql.jdbc.Driver") was not found in the CLASSPATH. Please check your CLASSPATH specification, and the name of the driver.
报错背景: CDH中集成hive插件,启动报错. 报错现象: [main]: Metastore Thrift Server threw an exception... javax.jdo.JDOFa ...
- Django 引用{% url "name"%} 避免链接硬编码
前提条件:为每个url指定name且name值要唯一.比如: 项目中的url.py文件: urlpatterns = patterns('', url(r'^$',TemplateView.as_vi ...
- Spring Cloud 如何使用Eureka注册服务 4.2.2
要使用Eureka实现服务发现,需要项目中包含Eureka的服务端发现组件以及客户端发现组件. 搭建Maven父工程 创建一个Maven父工程xcservice-springcloud,并在工程的po ...
- layer confirm 三种选择按钮
layer.confirm('请选择是否通过提现?(tips:同意直接打款,驳回不可恢复)', { btn : ['通过-打款','不通过','通过-已打款'], btn1:function(){ a ...
- 【Leetcode_easy】1025. Divisor Game
problem 1025. Divisor Game 参考 1. Leetcode_easy_1025. Divisor Game; 完