JQuery实现倒计时按钮的实现代码

代码如下:

<head>
<title>test count down button</title>
<script src="http://demo.jb51.net/jslib/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>

有兴趣您可以自己实现一下。

赞 (0)

相关推荐

  • jquery简单倒计时实现方法

    本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2

  • jquery 倒计时效果实现秒杀思路

    复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59","#colockbox1"); }); function countDown(time,id){ var day_elem = $(id).find('.day'); var hour_elem = $(id).find('.hour'); var minute_

  • jQuery倒计时代码(超简单)

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script

  • 利用jQuery实现漂亮的圆形进度条倒计时插件

    利用jQuery实现漂亮的圆形进度条倒计时插件

    jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览    源码下载 使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"><

  • JQuery实现倒计时按钮具体方法

    复制代码 代码如下: <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/javascri

  • jQuery实现倒计时按钮功能代码分享

    代码一: { wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled").val('重发短信验证码'); this.wait = 90; } else { var _this = this; $(that).attr("disabled", true).val('在'+_this.wait+'秒后点此重发'); _this.wait--; setTi

  • jQuery实现倒计时跳转的例子

    实现代码: 复制代码 代码如下: <html>   <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    <title>跳转页面</title>      <script src="jquery.js"></script>    <script la

  • jQuery实现倒计时功能 jQuery实现计时器功能

    本文转载自 jquery 做一个小的倒计时效果 在实际运用中,经常会使用到倒计时的效果.以下代码利用jQuery实现了一个倒计时计时器. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery倒计时实现</title> <style type="text/css"> .shop_list ul li{ di

  • 基于jQuery的倒计时实现代码

    在线演示:http://demo.jb51.net/js/2012/mydaojishi/打包下载:mydaojishi_jb51核心代码: 复制代码 代码如下: $(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = ""; //输入的日期 var iRemain = ""; //开始和结束之间相差的毫秒数 var sDate =

  • jquery实现手机发送验证码的倒计时代码

    复制代码 代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.

随机推荐