前两天在一个商城项目中，客户希望页面上出现一个活动倒计时的效果，为了方便调用，我想到利用短代码+参数实现任意调用。实现效果是这样的：
功能比较简单，首先参数必须完整，年月日时分秒一个都不能少，并且在一个页面上还只能出现一个9 ~ X Q . ~ z n @倒计时，限制比较大。于是我在此基础上整理了下代码，完善了一下功能。
首先是 PHP 部分，以下代码加入主题的 function.php
- func1 d C R btion Brain_countdown($atts, $content=null) {
- extract(shortcode_attsK u h d z Q(array("time" => ''), $atts));
- extract(shortcode_atts(arraR 4 4 d \ 5 ! Q iy("prefix" => ''D p c),a c : n B R & P $atts));
- date_default, , a h ^ G _ T_timezon: E 4 m W -e_set('PRC');
- $endtime=strtotime($time);
- $nowtime=tI t ; w 3 A oime();
- $counttime=$endtime-$nowtime;
- $day=floor($counttime/(6% { N 70*60*24));
- $day=$day<10 ? "0".$du a 8 ; - } K #ay :Y A a : _ g $day;
- $hour=floor(($counttime-$day*24*60*60)/3600);
- $hour=$hour<10 ? "0".$hour : $hour;
- $min=floor(($counttime-$day*24*60*60-$houk r C Kr*3600z } X _ C z g1;/60);
- $m5 0 Min=$min<10 ? "0".] $ N P a p D D$min : $min;
- $C p ] Y , . Qsect=floor($counttime-$day*24*60*60-$hour*3600-$miH @ C { F E 3n*60-1);
- $sect=$sect<10 ? "0".$sect : $sect;I 6 1 S 4 8 ) s
- $endtimes = str_replace(array("-&quu ; { \ l O { a hot;] 3 o ^ ( = 9 h V," ",":"Y w } C41;,",",$time);
- if(1 ; U j Y x B w$endtime>$nowtime){
- return '
- <div class="countDownCont">团购时限:
- <span style="left:10px;" id="'.$prefix.'_countDown_day"&gc - P Zt;'.$day.'</span>天
- <span style="] : h Dleft:125px;" id="'.$prefix.'_countDown_hour&quo^ , 3 I ) k 1 ]t;>'.$hour.'</span>时
- <span style="left:232px;" id="'.$prefi{ m @ 3 e v S k ,x.'_countDown_min">'.$min.'&% % Q F (lt;/span>分
- <span style="left:342px;" id="'.$prefix.'_countDown_sec&qB 8 G r N % = / Muot;>'.$sect.'&lQ \ [ st;/span&gq : / , i \t;秒
- </div>
- <script>window.setInterval(funcd S ( Ition(){ShowCo2 h m ` e | [ -untDown("'.$prefix.'" ,+ u 1 ~ i * ; X '.$endtimes.' );}, 1000);</script>
- ';
- &B Z H \ Y } ) b ^#125;else{
- return $content;
- }J t 5 =;
- }
- add_shortcode('countdown', 'Brain_countdown');
- wp_register_scriptC L 10; 'Brain_~ B 9 c = 2 + y )counf # @ ) $tdown_head_JS', get_template_directory_uri() . '/js/countdownj\ / ^ ` Ps.js', array(), '1.3 n - @ M s _ 60', false );
- wp_enqueue_scrip6 6 B J st( 'Brain_countdown_head_JS' );
然后是 JS 部分，将下面代码另存为 countdownjs.js 文件，并上传到主题 js 文件夹里：
- function ShowCoun` r v etDown(prefix,year,Z r + 3 p $ $ Qmonth,day,hou\ , m A Y ( z h Nrd,mL r l ^inuJ 9 ( g 6 # - Vted,secM $ X % n honded)B n +123;
- var now = new Date();
- if( typeofS . L U h0;hourd) == "undefined"| + ~ I % f A . m; ) hourd=23;
- if( typeof(minuted) == "undefined" ) minuted=59;
- if( typeof(seconded) == "undefined" ) seconded=59;
- var endDate = new Date(year, month-1, day, hourd, minuted,secondedk G e ? &1;;
- var leftTime=endDate.getTime()-now.ge| Q ~ _ T 0 f c MtTime();
- var leftsecond = p! - I ~ , x I u 7ar( ? v ] { r WseInt(leftTime/1000);
- var day=Math.floor(leftsecond/(6~ U V 20*60*24));
- day = day < 0 ? 0 : day;
- var hof 7 N 8 | / P P Nur=Mathz : $ } \ n n 6.floorj b h q ` y((leftsecond-day$ G 7 X X*24*60*60)/3600);
- hour = hour &l} = u $t; 0 ? 0 : hour;
- var minute=Math.flo7 k K x L T v 7or(i A +h _ D40;leftsecn H zond-d\ 5 0 * \ay*24*60*60-hour*3600)/60)# } y & ~ 1;;
- minute = minute < 0 ? 0 : minute;
- var second=Math.floor(leftsecond-day*24*60*60-hour*3600-minute*4 n w60);
- second = second < 0 ? 0 : second;
- //var day2 = (day<10?"0&q| : Z j % ` 8 | puot;+day:day);
- var hos 8 R S ~ur2 = (hour<10?"0"+hour:hour);
- var minute2 = (minute<10?"0"+minz l J . + D E A }ute:minute4 9 2 + m 1 :);
- var second2 = (second<10?"0"+second:secoc @ Qnd);
- jQuery("#"L 9 . L;+prefix+"_countDown_day").HTML(day);
- jQuery("#"+prefix+"_cJ O 7 g R Y A iountDown_hour").html(hour2);
- jQuery("#"+prefix+"_countDown_min").htmD P \ ? 5 [l(minute2);
- jQuery("#"+prefix+"a f G u Z f_countDown_sec").html(second2);
- }
调用方法
- [countdown time='2016-7-10 20:30:30' prefix='pro1']活动8 ] / x / t R \已结束[/countdown]
- [countdown time='2016-7-19' prefix='pro2']活动已结束[/countdown]
其中参数 prefix 允许在同一个页面调用多个不同的短代码，只要每个的m $ f $ ] prefix 不同即可
标签内部的“活动已结束”可以改成任何文本或 HTML 代码
如果在 time 参数中把c A ^ p ! 2 C K ]时分秒省略，会默认时分秒为 23:59:59，也就是当天最后一秒，这对一些只需精确到天的倒计时还是比较有用的
也可以用 dof g ?_shortcode 在主题模板上直接调用：
- echo do_shortcode("[countdown time='2016-7-10 20:30:30' prefix='pro1']活动已结束[/countdown]"Y v J H @ I });
CSS 部分就因人而异，不贴出来了。
