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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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
类的另类用法--数据的封装
2006/10/09 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php生出随机字符串
2017/07/06 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
javascript按顺序加载运行js方法
2017/12/01 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python 字典dict使用介绍
2014/11/30 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
经典c++面试题五
2014/12/17 面试题
竞聘上岗演讲稿
2014/05/16 职场文书
营销总监岗位职责
2014/09/16 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
Python天气语音播报小助手
2021/09/25 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js