编程 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 相关文章推荐

jQuery前台数据获取实现代码

Mar 16 Javascript

javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)

Jul 04 Javascript

解决JQeury显示内容没有边距内容紧挨着浏览器边线

Dec 20 Javascript

JavaScript中getUTCSeconds()方法的使用详解

Jun 11 Javascript

Jquery针对tr td的一些实用操作方法(必看篇)

Oct 05 Javascript

js中的事件委托或是事件代理使用详解

Jun 23 Javascript

JavaScript实现HTML5游戏断线自动重连的方法

Sep 18 Javascript

JavaScript fetch接口案例解析

Aug 30 Javascript

详解如何使用node.js的开发框架express创建一个web应用

Dec 20 Javascript

mpvue+vant app搭建微信小程序的方法步骤

Feb 11 Javascript

highcharts.js数据绑定方式代码实例

Nov 13 Javascript

JavaScript进阶（一）变量声明提升实例分析

May 09 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