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点击发送按钮后,按钮文本倒计时的更多相关文章

  1. jquery实现点击文字后变成文本框且可修改

    $(function() { //获取class为caname的元素 $(".caname").click(function() { var td = $(this); var t ...

  2. function设置jsp页面使用js控制文本框只读,并且按下backspace删除按钮后停在原页面

    最近一直在学习function设置之类的问题,现在正好有机会和大家分享一下. 设置只读 document.getElementById("projcode").setAttribu ...

  3. jquery倒计时按钮常用于验证码倒计时

    <!doctype html><html><head> <meta charset="utf-8"> <title>jq ...

  4. 基于jQuery悬停弹出遮罩显示按钮代码

    今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  5. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

  6. js点击发送验证码 xx秒后重新发送

    用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <! ...

  7. 如何让Web程序在点击按钮后出现如执行批处理程序般的效果

    在cli程序中,输入命令得到连续的输出已经是一种进度而美观的页面交互形式,好比下图: 而web程序里也有类似的场景,比如执行一个耗时任务,除了显示出等待图标外,用户还希望把执行的状态及时显示出来.如下 ...

  8. JS实现单击按钮后弹出新的窗口页面

    点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. 【前台页面 BUG】回车按钮后,页面自动跳转

    点击回车按钮后,页面自动的迅速跳转 原因: 表单隐式提交了. 解决方法: 在方法执行完成后,加上return false; 代码如下: /** * 注册按钮的点击事件 */ $("#regi ...

随机推荐

  1. WebApi:WebApi的Self Host模式

    不用IIS也能執行ASP.NET Web API 转载:http://blog.darkthread.net/post-2013-06-04-self-host-web-api.aspx 在某些情境, ...

  2. css学习笔记(5)

    <style>*{margin:0; padding:0;}ul{ list-style:none;}li{ height:30px; width:100px; background:#F ...

  3. 13. Reorder List

    Reorder List Given a singly linked list L: L0→L1→…→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… Y ...

  4. DATAGUARD 添加修改REDOLOG大小

    DG在线日志组大小修改 环境(单实例,Centos 6.5 X64,oracle 10.2.0.5,filesystem存储) REDO ONLINE LOG select * from v$logf ...

  5. 剑指Offer:面试题21——包含min函数的栈(java实现)

    问题描述: 定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min,push及pop的时间复杂度都是O(1). 思路:加入一个辅助栈用来存储最小值集合 (这里要注 ...

  6. ini 文件

    INI文件是一个无固定标准格式的配置文件.它以简单的文字与简单的结构组成,常常使用在视窗操作系统,或是其他操作系统上,许多程序也会采用INI文件做为设置程序之用.视窗操作系统后来以注册表的形式替换掉I ...

  7. Oracle 表分区

    从以下几个方面来整理关于分区表的概念及操作: 表空间及分区表的概念 表分区的具体作用 表分区的优缺点 表分区的几种类型及操作方法 对表分区的维护性操作 1.表空间及分区表的概念 表空间: 是一个或多个 ...

  8. java之注解Annotation

    元注解:负责注解其他注解,java5提供的4个meta-annotation元注解 @Target 规定注解修饰的范围 ElementType.CONSTRUCTOR:构造器声明 ElementTyp ...

  9. 使用DotNetOpenAuth搭建OAuth2.0授权框架

    标题还是一如既往的难取. 我认为对于一个普遍问题,必有对应的一个简洁优美的解决方案.当然这也许只是我的一厢情愿,因为根据宇宙法则,所有事物总归趋于混沌,而OAuth协议就是混沌中的产物,不管是1.0. ...

  10. 各种数据库分页sql

    1.oracle数据库分页 select * from (select a.*,rownum rc from 表名 where rownum<=endrow) a where a.rc>= ...