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 () { ...
随机推荐
- nxp基于layerscape系列芯片的硬件型号解析
每一种layerscape系列芯片都有两种硬件型号: RDB 和QDS RDB: Refrence Design Board QDS: QorIQ Development system
- failure during conversion to COFF:file invalid or corrupt
用Visual Studio 2010编译一个C++工程时突然遇到下面这个编译错误:fatal error LINK1123:failure during conversion to COFF:fil ...
- [转][linux][centos]嵌入式 Linux下编译并使用curl静态库
#x86 ./configure --disable-shared --enable-static --disable-ftp --disable-ipv6 --disable-rtsp --disa ...
- (待续)【转载】 DeepMind发Nature子刊:通过元强化学习重新理解多巴胺
原文地址: http://www.dataguru.cn/article-13548-1.html -------------------------------------------------- ...
- Python3实战——爬虫入门
一.安装库 使用conda安装: conda install requests 如果出现解析环境问题,需要激活conda环境: https://www.cnblogs.com/jdemarryme/p ...
- 【Linux】Jenkins以war包运行及开机启动配置(四)
本例介绍jenkins已war包运行及开机启动配置 环境:Linux环境(CentOS 7.4) 以war包运行 1.下载jenkins.war包 2.启动war包( 默认端口:8080,默认JENK ...
- 123457123456#1#----com.tym.DishuGame78--前拼后广--宝宝打地鼠_tym
com.tym.DishuGame78--前拼后广--宝宝打地鼠_tym
- HTTPS小结 、TSL、SSL
https://segmentfault.com/a/1190000009020635
- AWS 架构最佳实践概述(十一)
AWS 架构最佳实践 AWS合理架构的框架支柱 安全性 - 保护并监控系统 能够保护信息.系统和资产 通过风险评估和缓解策略 可靠性 - 从故障中恢复并减少中断 从基础设施或服务故障中恢复 动态获取计 ...
- SQL网页端在线自定义查询工具
TreeSoft数据库管理系统,是用JAVA开发,基于网页的数据库SQL查询工具.功能包括:数据库的展示,库表的展示,表字段结构的展示,SQL语句的在 线编辑批量执行,表结构的在线设计维护,数据的在线 ...