编程 Javascript

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程序设计有所帮助。

JQuery实现的按钮倒计时效果

- Author -

daimajiayuan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Stop SQL Server

Jun 21 Javascript

js Flash插入函数免激活代码

Mar 31 Javascript

JavaScript高级程序设计阅读笔记（七） ECMAScript中的语句

Feb 27 Javascript

JS格式化数字保留两位小数点示例代码

Oct 15 Javascript

利用jq让你的div居中的好方法分享

Nov 21 Javascript

Js实现网页键盘控制翻页的方法

Oct 30 Javascript

Javascript基础教程之数组 array

Jan 18 Javascript

基于cssSlidy.js插件实现响应式手机图片轮播效果

Aug 30 Javascript

jQuery插件easyUI实现通过JS显示Dialog的方法

Sep 16 Javascript

解决vue-cli + webpack 新建项目出错的问题

Mar 20 Javascript

javascript设计模式 ? 工厂模式原理与应用实例分析

Apr 09 Javascript

JavaScript 判断浏览器是否是IE

Feb 19 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