Jquery点击发送按钮后,按钮文本倒计时
1.html代码
<input type="number" id="mobileNo" placeholder="请输入手机号" />
<input type="button" id="btnGetCode" style="background-color:#68BE02;color: #FFFFFF;border:0 solid #ccc;margin-bottom: 5%;width: 100%;height: 40px;" value="获取验证码"/>
<button id="btnDownload" style="color: #FFFFFF;border:0 solid #ccc;margin-top: 5%;width: 100%;height: 40px;">确认下载</button>
2.JS代码
function change_state(status) {
var btnGetCode = $('#btnGetCode');
var sending = "发送中...";
var sent = "重新获取";
var ticks = 60;
var tick=function () {
if (ticks > 0) {
setTimeout(function() {
btnGetCode.val(sent + "(" + ticks + ")");
ticks--;
tick();
}, 1000);
} else {
change_state('retry');
}
};
ticks = 60;
switch (status) {
case "sending":
{
$("#btnGetCode").attr("disabled",true);
btnGetCode.val(sending);
break;
}
case "tick":
{
$("#btnGetCode").attr("disabled",true);
tick(sent);
break;
}
case "retry":
{
$("#btnGetCode").attr("disabled",false);
btnGetCode.val(sent);
break;
}
}
};
3.方法调用
$("#btnGetCode").click(function(){
change_state('sending');
var mobileNumber = $("#mobileNo").val();
$.ajax({
url: "/Share/SendVerfCode",
type: "post",
data: { mobileNo: mobileNumber },
async: true,
success: function (result) {
alert(result.msg);
if(result.state){
change_state("tick");
}else{
change_state("retry");
}
},
error: function () {
alert("短信验证码发送失败");
}
});
});
Jquery点击发送按钮后,按钮文本倒计时的更多相关文章
- jquery实现点击文字后变成文本框且可修改
$(function() { //获取class为caname的元素 $(".caname").click(function() { var td = $(this); var t ...
- function设置jsp页面使用js控制文本框只读,并且按下backspace删除按钮后停在原页面
最近一直在学习function设置之类的问题,现在正好有机会和大家分享一下. 设置只读 document.getElementById("projcode").setAttribu ...
- jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
- 基于jQuery悬停弹出遮罩显示按钮代码
今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言
js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...
- js点击发送验证码 xx秒后重新发送
用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <! ...
- 如何让Web程序在点击按钮后出现如执行批处理程序般的效果
在cli程序中,输入命令得到连续的输出已经是一种进度而美观的页面交互形式,好比下图: 而web程序里也有类似的场景,比如执行一个耗时任务,除了显示出等待图标外,用户还希望把执行的状态及时显示出来.如下 ...
- JS实现单击按钮后弹出新的窗口页面
点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 【前台页面 BUG】回车按钮后,页面自动跳转
点击回车按钮后,页面自动的迅速跳转 原因: 表单隐式提交了. 解决方法: 在方法执行完成后,加上return false; 代码如下: /** * 注册按钮的点击事件 */ $("#regi ...
随机推荐
- Hadoop学习18--yarn配置篇-基本配置节点
<configuration> <property> <name>yarn.nodemanager.aux-services</name> <va ...
- Java事务处理全解析(六)—— 使用动态代理(Dynamic Proxy)完成事务
在本系列的上一篇文章中,我们讲到了使用Template模式进行事务管理,这固然是一种很好的方法,但是不那么完美的地方在于我们依然需要在service层中编写和事务处理相关的代码,即我们需要在servi ...
- AS3下如何来判断XML属性的是否存在
在as3中判断xml节点是否存在可用XMLList中的方法:hasOwnProperty(p:String):Boolean. 但是判断xml节点是否存在某一属性,对象中好像没有该方法,只能用unde ...
- 欧几里得&扩展欧几里得
原博网址:http://www.cnblogs.com/frog112111/archive/2012/08/19/2646012.html 欧几里德算法 欧几里德算法又称辗转相除法,用于计算两个整数 ...
- JavaScript笔记基础篇(二)
基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...
- EXT学习之——Ext两个js之间的传参
A 的js访问 B的js,并将A选择的guid的行传到 B的 js进行处理事项 A 的js 的写法var receiverFrom = new xxx.xxx子js方法体名 ({ parentCm ...
- Jmeter组件5. 逻辑控制
逻辑控制组件也有不少,但是用到的情况也不多,只打算举个While controller结合Regular Expression Extractor的例子 Condition,跳出循环的条件 如果放空, ...
- EF6+MVC5之Oracleo数据库的Code First方式实现
折腾了好几天,在办公室机器上死活找不到ODP.net的Oracle数据库连接方式(但在家中电脑上正常).后来把之前安装的VS2013和所以安装的Oracle客气端统统卸载,重新安装visual stu ...
- nc检测端口是否正常服务的一个命令
最近碰到一个项目,前端用apache htttpd进行发布(80端口),通过双机负载均衡转发到后端的两个tomcat进行处理(8081和8082端口),现在需要随时监控这三个端口的情况,一旦down掉 ...
- WebForm---增删改(内置对象)
一.添加 前台代码: <body> <form id="form1" runat="server"> <h1>用户添加< ...