<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

var InterValObj; //timer变量，控制时间

var count = 5; //间隔函数，1秒执行

var curCount;//当前剩余秒数

function sendMessage() {

  　curCount = count;

　　//设置button效果，开始计时

     $("#btnSendCode").attr("disabled", "true");

     $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");

     InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次

　　  //向后台发送处理数据

     $.ajax({

     　　type: "POST", //用POST方式传输

     　　dataType: "text", //数据格式:JSON

     　　url: 'Login.ashx', //目标地址

    　　 data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,

    　　 error: function (XMLHttpRequest, textStatus, errorThrown) { },

     　　success: function (msg){ }

     });

}

//timer处理函数

function SetRemainTime() {

            if (curCount == 0) {

                window.clearInterval(InterValObj);//停止计时器

                $("#btnSendCode").removeAttr("disabled");//启用按钮

                $("#btnSendCode").val("重新发送验证码");

            }

            else {

                curCount--;

                $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");

            }

        }

</script>

</head>

<body>

        <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>

</body>

</html>

jq实现点击按钮后倒计时，多用于手机验证的更多相关文章

  1. jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码

    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...

  2. js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  3. response 后刷新页面,点击按钮后，禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

  4. TProcedure，TMethod，TNotifyEvent，TWndMethod的区别，并模拟点击按钮后发生的动作

    忽然发现TProcedure和TNotifEvent的区别还挺大的: procedure TForm1.Button2Click(Sender: TObject); begin ShowMessage ...

  5. Java基础 awt Button 点击按钮后在控制台输出文字

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

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

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

  7. 点击按钮后到底发生了什么，Touch，LongClick或者Click?

    按钮点击事件详解 最近一个项目需要给应用初始界面上的动态按钮添加在不同状态的变换效果,如点击(俗一点也可称为按压)后实现背景图的更换或者图标的缩放等效果.由于按钮点击的时间有长有短,所以采用OnTou ...

  8. 如何点击按钮后在加载外部的Js文件

    或许有朋友遇到过,想等自己点击按钮之后才执行某一个js文件,那么,你运气好,看到了我的代码了哈哈, <html> <head> <title></title& ...

  9. 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法

    H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...

随机推荐

  1. CSS的属性

    一,可继承属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF- ...

  2. 移动前端不得不了解的HTML5 head 头标签（中下篇）

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

  3. Nginx访问限速配置方法详解

    开发测试阶段在本地限速模拟公网的环境,方便调试.投入运营会有限制附件下限速度,限制每个用户的访问速度,限制每个IP的链接速度等需求. 配置简单,只需3行,打开"nginx根目录/conf/n ...

  4. 十六、oracle 索引

    一.管理索引-原理介绍索引是用于加速数据存取的数据对象.合理的使用索引可以大大降低i/o次数,从而提高数据访问性能.索引有很多种我们主要介绍常用的几种:为什么添加了索引后,会加快查询速度呢? 二.创建 ...

  5. log4net 日志文件占用，不能及时释放

    在appender 下面加 <lockingModel type="log4net.Appender.FileAppender+MinimalLock" />

  6. Linux Shell : Test命令参数解析

    格式: test conditions test -n string : string 不为空 test -z string : string 为空 test int1 -eq int2  : int ...

  7. C# 连接SQL Server数据库的几种方式--server+data source等方式

    如何使用Connection对象连接数据库? 对于不同的.NET数据提供者,ADO.NET采用不同的Connection对象连接数据库.这些Connection对象为我们屏蔽了具体的实现细节,并提供了 ...

  8. 图片特效-仿 iPhone 图片查看器效果

    —————————————————————— <script type="text/javascript">                    var arr = ...

  9. nefu 197 关键字检索(kmp算法）

    Description 在信息检索系统中一个很重要的环节就是关键字符串的查找,从而很多对自己有用的信息.给你一个很长的一段文字, 和一个关键信息字符串,现在要你判断这段文字里面是否有关键字符串. In ...

  10. docker 基础命令二

    开启/停止/重启 查看当前正在运行容器docker ps 查看包括已经停止的所有容器docker ps -a 显示最新启动的一个容器docker ps -l 新建一个容器运行docker run 启动 ...