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

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

<!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>

 

				
时间: 2024-09-20 05:35:04

jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码的相关文章

jquery 点击按钮后,倒计时60秒才能再次点击发送

例  代码如下 复制代码 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascript"> var wait=60; function time(o) {         if (wait == 0) {             o.removeAttribute("disabled");

求点击按钮后,action处理时的按钮等待效果

问题描述 求点击按钮后,action处理时的按钮等待效果最近做项目,要实现点击按钮,让表单提交,通过post方式把表单中的大量的数据带给action,然后action查询数据库,得到相应的数据.再通过poi把这些数据写入excel文件中.然后,用装好数据的excel文件生成一个输入流,供用户下载.由于用户在表单中所选择的内容不同,action处理的时间也会不同.要求点击按钮后把按钮的名字改成"正在处理",等action(以"流"的方式返回)处理完,浏览器弹出&quo

Bootstrap中点击按钮后变灰并显示加载中实例代码_jquery

Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示. 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮

JavaScript点击按钮后弹出透明浮动层的方法

  这篇文章主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

php-点击按钮后,怎么将form表单中的数据提交到弹窗中显示?

问题描述 点击按钮后,怎么将form表单中的数据提交到弹窗中显示? 点击按钮后,怎么将form表单中的数据提交到弹窗中显示?本人学习的是php语言 解决方案 http://blog.csdn.net/wangzi11322/article/details/45287967 解决方案二: 指定表单的target就行了,可以在指定窗口打开或者新窗口打开,不设置默认为当前窗口打开 <form target="窗口名称或者_blank" 解决方案三: 先用serializeArray序列

JavaScript点击按钮后弹出透明浮动层的方法_javascript技巧

本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法.分享给大家供大家参考.具体分析如下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下. <HTML> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <META http-equiv=Content-Type content="text/htm

jQuery实现点击按钮弹出可关闭层的浮动层插件_jquery

本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具

html-Dw cs6 要求点击按钮后在左下脚显示对应的mysql内容

问题描述 Dw cs6 要求点击按钮后在左下脚显示对应的mysql内容 如上图:点击提交按钮后就在左下角那里显示我查询出来的内容,应该在哪里写代码,在用dm cs6做的,麻烦懂的人说下 数据库连接成功了其他三个能正常显示. 部分代码 <?php echo $row_Recordset1['06.07.2015']; ?> <?php echo $row_Recordset1['18:25:08']; ?> <td><?php echo $row_Recordset

js实现点击按钮后给Div图层设置随机背景颜色的方法

  这篇文章主要介绍了js实现点击按钮后给Div图层设置随机背景颜色的方法,实例分析了javascript操作页面div元素属性及随机数的相关技巧,需要的朋友可以参考下 本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29