JQuery实现的按钮倒计时效果


Posted in Javascript onDecember 23, 2015

本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考,具体如下:

一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下:

<html>
<head>
<title>test count down button</title>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var count = 10;
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>
</html>

运行效果截图如下:

JQuery实现的按钮倒计时效果

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 #Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 #Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 #Javascript
JavaScript中的函数(二)
Dec 23 #Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 #Javascript
js实现正则匹配中文标点符号的方法
Dec 23 #Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 #Javascript
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
xajax写的留言本
2006/11/25 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
js代码实现轮播图
2020/05/04 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
自我鉴定200字
2013/10/28 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
教师辞职书范文
2015/02/26 职场文书