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 () { ...
随机推荐
- layui的select下拉框太长被遮挡了的解决办法
layui的select下拉框太长采用滚动条的形式出现,可以给select的dl加一个最大高度,具体的效果如下图 .layui-form-select dl { max-height:160px; }
- 新检出普通web项目爬坑记【我】
新检出一个普通 web项目, 1.首先发现需要用到的一些代码包没有加到构建目录, 先加入构建: 2.然后发现项目大面积报错, 随便打开代码看下,发现是因为缺少jar包,因为报错的代码太多了,所以使用 ...
- wpf日期控件
/// <summary> /// Value converter to convert a datetime object to the specified string format. ...
- Laya的调试,调试面板,断点调试
参考: 性能统计面板介绍 版本2.1.1.1 调试面板 Laya有两个调试选项,编辑模式F9. 第一个调试模式,除了调试面板,还有一个查看当前舞台对象的面板.类似白鹭的Egret Inspector. ...
- ORA-02287: sequence number not allowed here问题的解决
当插入值需要从另外一张表中检索得到的时候,如下语法的sql语句已经不能完成该功能:insert into my_table(id, name) values ((select seq_my_table ...
- docker build doris-0.11.20-release source code
1. pull doris dev docker image sudo docker pull apachedoris/doris-dev:build-env-1.1 2. dowload doris ...
- Ubuntu18.04下LAMP环境搭建
可以安装安装Xampp,Xampp是一个集成的LAMP开发环境. 但是这只是对于一个刚安装好的系统来说的,但是很有可能我的电脑上面已经安装过Apache,或者安装过MySQL,或者安装过PHP了,或者 ...
- Linux下,postgreSQL的查看与重启
查看命令:ps aux | grep postgresnetstat -npl | grep postgres 方法1: #su - postgres $pg_ctl restart 方法2: #su ...
- js 次方 开方 对数
次方 ,用Math.pow(值,次方数) 如: Math.pow(3,2); 3的平方 Math.Pow(2,3); 2的立方 开方Math.sqrt(值) 如: Math.sqrt(9); ...
- 第07组 Alpha冲刺(1/4)
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:完成人员分配,初步学习Android开发 Github签入记录 接下来的计划:继续完成Android开发的学习,带领团队进行前后端开 ...