`
飞天小女警
  • 浏览: 107194 次
  • 性别: Icon_minigender_2
  • 来自: 重庆
社区版块
存档分类
最新评论

JQuery倒计时插件

阅读更多

JQuery倒计时插件是一种比较常用的JQuery的插件,这里是粘贴别人的博客,并未进行测试,先收藏着以后会用到。

Html页面的调用方法代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<title></title><!--http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js-->   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<script src="jquery-1.4.2.js" type="text/javascript"></script>   
<script src="time.js" type="text/javascript"></script>   
<script>   
$(function(){   
    /*****  测试1  ****/   
   // 开始 && 重新开始   
   $("#start").click(function(){   
         $("#test").CRcountDown({   
                    startNumber:15,   
                    callBack:test   
            })   
           .css("color","red");   
     });   
     // 暂停   
   $("#pause").click(function(){   
         $("#test").pause();   
    });   
     // 暂停后 重新开始   
   $("#again").click(function(){   
        $("#test").reStart();   
    });   
    function test(){   
        $("<p>1</p>")   
              .hide()   
             .fadeIn(1000)   
             .appendTo("body");   
    }   
  
    /*****  测试2  ****/   
   // 开始 && 重新开始   
  $("#start2").click(function(){   
        $("#test2").CRcountDown({   
                startNumber:10,   
                callBack:test2   
            })   
           .css("color","blue");   
    });   
     // 暂停   
   $("#pause2").click(function(){   
         $("#test2").pause();   
   });   
   // 暂停后 重新开始   
  $("#again2").click(function(){   
       $("#test2").reStart();   
   });   
   function test2(){   
    $("<p>2</p>")   
              .hide()   
              .fadeIn(1000)   
              .appendTo("body");   
   }   
 
})   
</script>   
</head>   
<body>   
     <h1>测试1:</h1>   
     <button id="start" >开始&&重新开始</button>   
     <button id="pause" >暂停</button>   
     <button id="again" >暂停后 重新开始</button>   
     <div id="test" ></div>   
  
<br/>   
     <h1>测试2:</h1>   
     <button id="start2" >开始&&重新开始</button>   
     <button id="pause2" >暂停</button>   
     <button id="again2" >暂停后 重新开始</button>   
     <div id="test2" ></div>   
 
   <br/><br/>   
   Dev by cssrain   
  
</body>   
</html>  

 

Time.js的代码代码

$(function(){   
   jQuery.fn.countDown = function(settings,to) {   
      if(!to && to != settings.endNumber) { to = settings.startNumber; }   
        this.data("CR_currentTime",to);   
       $(this).text(to).animate({"none":"none"},settings.duration,'',function() {   
        if(to > settings.endNumber + 1) {   
            $(this).countDown(settings,to - 1);   
        }else{   
           settings.callBack(this);   
        }   
    });        
    return this;   
};   
  //计时&&重新计时   
jQuery.fn.CRcountDown = function(settings) {   
    settings = jQuery.extend({   
        startNumber: 10,   
        endNumber: 0,   
        duration: 1000,   
        callBack: function() { }   
    }, settings);   
    this.data("CR_duration",settings.duration);   
    this.data("CR_endNumber",settings.endNumber);   
    this.data("CR_callBack",settings.callBack);   
    return this.stop().countDown(settings);   
};   
//计时暂停   
jQuery.fn.pause = function(settings) {   
    return this.stop();   
};   
//暂停后,重新开始   
jQuery.fn.reStart = function() {   
    return this.pause().CRcountDown({   
        startNumber : this.data("CR_currentTime"),   
        duration :  this.data("CR_duration"),   
        endNumber : this.data("CR_endNumber"),   
        callBack : this.data("CR_callBack")   
    });   
};   
  
})  

 

分享到:
评论

相关推荐

    JQuery 倒计时插件

    JQuery倒计时插件是Web开发中常用的一种工具,它可以帮助开发者在网页上实现动态的时间显示,例如倒计时至某个特定日期或时间。这种插件通常基于JavaScript库JQuery构建,因为JQuery简化了DOM操作和事件处理,使得...

    三种颜色的jquery倒计时插件.zip

    《三种颜色的jQuery倒计时插件解析与应用》 在网页开发中,倒计时功能经常被用于预告活动、展示剩余时间等场景,而jQuery作为一款强大的JavaScript库,为开发者提供了丰富的工具和方法来实现这些功能。本篇文章将...

    jquery倒计时插件

    对于开发者来说,jQuery倒计时插件是构建网页动态效果和实现定时任务的利器。本文将深入探讨“jquery倒计时插件”,特别是那些可以独立设置时针、分针和秒针的特性。 首先,我们要理解什么是倒计时插件。倒计时插件...

    jQuery倒计时插件

    jQuery倒计时插件是一种基于JavaScript库jQuery的实用工具,用于在网页上实现动态的、实时更新的时间显示。这类插件通常被用于事件预告、限时促销、考试倒计时等场景,为用户提供一种直观的方式感知特定时间点的到来...

    基于jQuery的倒计时插件

    **jQuery倒计时插件详解** 在Web开发中,倒计时功能经常被用于各种应用场景,如活动开始时间提醒、考试倒计时等。jQuery,作为一款轻量级的JavaScript库,提供了丰富的API来简化DOM操作,使得创建倒计时插件变得...

    简单的jquery倒计时插件.rar

    本资源“简单的jquery倒计时插件.rar”提供了一个基于jQuery的倒计时功能,这在许多应用场景中非常实用,比如考试倒计时、活动开始倒计时等。接下来,我们将详细探讨jQuery、倒计时插件的工作原理以及如何使用此类...

    三种颜色的jquery倒计时插件

    【jQuery倒计时插件详解】 在Web开发中,倒计时功能经常被用于各种应用场景,如活动预告、考试倒计时或者定时发布等。jQuery作为一款轻量级的JavaScript库,提供了丰富的插件来扩展其功能,其中就包括倒计时插件。...

    jquery倒计时插件.rar

    《jQuery倒计时插件深度解析》 在Web开发中,倒计时功能常常用于活动预告、考试倒计时、限时优惠等场景,为用户提供直观的时间感知。jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来实现这些功能,其中...

    简单的jquery倒计时插件

    本篇文章将详细讲解基于jQuery实现的简单倒计时插件,以及如何通过这个插件来创建一个从10到0的倒计时效果。 首先,让我们了解jQuery倒计时插件的基本原理。倒计时功能通常涉及到JavaScript的定时器(setTimeout或...

    jquery倒计时插件多个倒计时同时计时代码

    本文将详细讲解如何使用jQuery实现多个倒计时插件同时计时的功能,这对于创建如考试倒计时、活动倒计时等多种场景都非常有用。 首先,我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能: 1. **...

    网络上的Jquery倒计时插件

    jQuery倒计时插件是网页开发中常用的一种工具,它能帮助开发者在页面上实现动态的时间显示,例如倒计时到某个特定日期或时间。在本案例中,我们讨论的是一款名为“lwtCountdown”的jQuery插件,该插件可能是从网络上...

    jQuery倒计时插件6种不同倒计时效果代码

    在本文中,我们将深入探讨jQuery倒计时插件及其6种不同的倒计时效果。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。倒计时功能在网页中有着广泛的应用,如在线考试、产品...

Global site tag (gtag.js) - Google Analytics