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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
javascript控制台详解
Jun 25 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
基于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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
php db类库进行数据库操作
2009/03/19 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python实现人工蜂群算法
2020/09/18 Python
python归并排序算法过程实例讲解
2020/11/04 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
python+opencv实现车道线检测
2021/02/19 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
物业管理应届生求职信
2013/10/28 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
培训班主持词
2014/03/28 职场文书
大学生社团活动总结
2014/04/26 职场文书
党员承诺书格式范文
2015/04/28 职场文书