Jquery倒计时插件Countdown timer jQuery Plugin

一个项目里用到了团购倒计时,本来想用递减的方式手写一个,但是想到兼容性问题,还是用封装好的Jquery插件吧。
今天在这里推荐的是“Countdown timer jQuery Plugin”,它是一个轻量级且灵活的倒计时插件,直接用实例说明吧。

首先包含主体的文件:

<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/jquery.jcountdown1.3.js" type="text/javascript"></script>

然后在模板页面加上以下JQUERY代码

<script type="text/javascript">
$(document).ready(function() {
 
    $("#time").countdown({date:"july 1, 2011"}); //Just date
    $("#time").countdown({date:"july 1, 2011 18:00:00"}); //Date and Time (in 24 hour format)
 
    //More options
    $("#time").countdown({
        date: "july 1, 2011 19:24",
        onChange: function( event, timer ){
 
            /*
            Tips:
 
            event.target is DOM Element
            this is DOM element
            $(this) is jQuery Element
            timer is interval for countdown
 
            If a countdown should end early you could do:
 
            clearInterval( timer );
            $(this).trigger('complete');
            */
 
        },
        onComplete: function( event ){
 
            $(this).html("Completed");
        },
        minus: false //defaults to false anyway
        leadingZero: true
    });
});
</script>

在模板里增加一个ID。

<p id="time"></p>

例子CSS,可忽略。

p#time{
    color:#c21017;
    text-align: center;
}
p#time span{
    display:inline;
    color:#222222;
    font-size:0.8em;
}

配置里大概修改说明如下:

date: 'June 11, 2010', //Date to countdown to
 
updatetime: 1000, //Time to update timer (milliseconds)
 
//Replaces the following flags with date values
%{d} = day
%{h} = hour
%{m} = minutes
%{s} = seconds
 
//jquery.jcountdown1.3.js 主要修改在这里
htmlTemplate: "%{d} <span class="small">days</span> %{h} <span class="small">hours</span> %{m} <span class="small">mins</span> %{s} <span class="small">sec</span>"
 
//If countdown timer should go into minus values instead of 00:00:00:00 when countdown time has passed
minus: false
 
//Gets called each time the countdown timer updates
//Can access element with countdown timer on it, as well as the timer interval itself
onChange: function( event, timer ){}
 
//Gets called when countdown completes
onComplete: function( event ){} //Can access element with countdown timer on it
 
//Whether time should have a leading zero e.g 02 days 01 hours 09 seconds
leadingZero: falsecountdown1.3

JS时间处理部分代码一并带出:

var date = new Date();

//时间格式替换修改
var str = '2008-10-09 21:35:28';//PHP中对应的UNIX时间戳为1223559328
var new_str = str.replace(/:/g,'-');
new_str = new_str.replace(/ /g,'-');
var arr = new_str.split("-");
var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));

//转换为英文时间格式
var dt = new Date();
var m=new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec");
var w=new Array("Monday","Tuseday","Wednesday","Thursday","Friday","Saturday","Sunday");
var d=new Array("st","nd","rd","th");
mn=date.getMonth();
wn=date.getDay();
dn=date.getDate();

var dns;
if(((dn%10)<1) ||((dn%10)>3)){
	dns=d[3];
}else{
	dns=d[(dn%10)-1];
	if((dn==11)||(dn==12)){
	dns=d[3];
	}
}
document.write("<hr>"+m[mn]+" "+dn+dns+" " +w[wn-1]+" "+dt.getFullYear()+"<hr>");

Leave a Reply

(will not be published)