JQuery实现倒计时按钮具体方法


Posted in Javascript onNovember 14, 2013
<head>
    <title>test count down button</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                var count = 3;
                var countdown = setInterval(CountDown, 1000);
                function CountDown() {
                    $("#btn").attr("disabled", true);
                    $("#btn").val("Please wait " + count + " seconds!");
                    if (count == 0) {
                        $("#btn").val("Submit").removeAttr("disabled");
                        clearInterval(countdown);
                    }
                    count--;
                }
            })
        });
   </script>
</head>
<body>
<input type="button" id="btn" value="Submit" />
</body>

有兴趣您可以自己实现一下。
Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
webpack入门+react环境配置
Feb 08 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
jquery动态增加删除表格行的小例子
Nov 14 #Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 #Javascript
Javascript call和apply区别及使用方法
Nov 14 #Javascript
javascript 上下banner替换具体实现
Nov 14 #Javascript
javascript scrollTop正解使用方法
Nov 14 #Javascript
简单的Jquery遮罩层代码实例
Nov 14 #Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 #Javascript
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
ML神器:sklearn的快速使用及入门
2019/07/11 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Python 如何创建一个线程池
2020/07/28 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
2014年清明节寄语
2014/04/03 职场文书
项目经理任命书范本
2014/06/05 职场文书
给病人的慰问信
2015/03/23 职场文书
实习护士自荐信
2015/03/25 职场文书
财务部岗位职责范本
2015/04/14 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
调解协议书范本
2016/03/21 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
基于Go语言构建RESTful API服务
2021/07/25 Golang