<!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 = 30; //间隔函数，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: "json", //数据格式: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>

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

  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. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

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

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

  7. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

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

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

  9. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

随机推荐

  1. http的GET和POST

    本文主要内容 1.  GET和POST方法介绍 2.  源代码分析 3.  结果分析 4.  例子参考及引用: http://www.cnblogs.com/zhijianliutang/archiv ...

  2. 第三百一十八节，Django框架，信号

    第三百一十八节,Django框架,信号 Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 也就是当程序有指定动作时, ...

  3. 第二百八十二节，MySQL数据库-MySQL视图

    MySQL数据库-MySQL视图 1.视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 2.也 ...

  4. Jquery实现上下移动和排序代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. Ubuntu创建新用户并增加管理员权限

    1.Ubuntu中的root帐号默认是被禁用了的,所以登陆的时候没有这个账号 打开终端开启root账户 sudo passwd -u root sudo passwd root 设置root密码,输入 ...

  6. ChemDraw Std 14如何标记同位素

    ChemDraw软件是一款专业高效的化学绘图工具,能够绘制各种复杂的结构方程式,在基础化学.有机化学.材料化学等领域得到广泛应用.而ChemDraw Std 14 作为ChemDraw 的最新版本,增 ...

  7. swift - UITextField 的用法

    1,文本框的创建,有如下几个样式: public enum UITextBorderStyle : Int {     case none 无边框     case line 直线边框     cas ...

  8. MySQL开启预编译环境

    Mysql是默认 没有开启预编译的,需要在配置中加上 jdbc:mysql://xxx.22.11.31:3306/dbname?useServerPrepStmts=true

  9. 2017年要学习的三个CSS新特性

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

  10. 上传控件CSS用图片代替

    <style type="text/css"> a.btn {width: 120px;height: 42px;overflow: hidden;display: b ...