一个项目里用到了团购倒计时,本来想用递减的方式手写一个,但是想到兼容性问题,还是用封装好的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>");