wordpress中实现一个页面多个倒计时(秒杀)功能

秒杀功能其实非常常见，比如商品秒杀，或者活动倒计时等等，在wordpress我们要实现这个秒杀功能其实方法很多，有现成的jquery

倒计时插件，当然也有很多现成的倒计时插件，本篇我们主要讲述下如何做简单的秒杀功能，因为这些现成的东西样式都不是我们要

的。我们要实现的功能如下：

如图中，我们看到Ends in后面的时间，时、分、秒，我们只需要简单的实现数字倒计时刷新，不需要太复杂的功能。所以实现过程如下：

第一步：添加如下代码到主题的function.php

function countdown($atts, $content=null) {
extract(shortcode_atts(array("time" => ''), $atts));
extract(shortcode_atts(array("prefix" => ''), $atts));
date_default_timezone_set('PRC');
$endtime=strtotime($time);
$nowtime=time();
$counttime=$endtime-$nowtime;
$day=floor($counttime/(60*60*24));
$day=$day<10 ? "0".$day : $day;
$hour=floor(($counttime-$day*24*60*60)/3600);
$hour=$hour<10 ? "0".$hour : $hour;
$min=floor(($counttime-$day*24*60*60-$hour*3600)/60);
$min=$min<10 ? "0".$min : $min;
$sect=floor($counttime-$day*24*60*60-$hour*3600-$min*60-1);
$sect=$sect<10 ? "0".$sect : $sect;
$endtimes = str_replace(array("-"," ",":"),",",$time);
if($endtime>$nowtime){
return '
<div class="countDownCont">团购时限:
<span style="left:10px;" id="'.$prefix.'_countDown_day">'.$day.'</span>:
<span style="left:125px;" id="'.$prefix.'_countDown_hour">'.$hour.'</span>:
<span style="left:232px;" id="'.$prefix.'_countDown_min">'.$min.'</span>:
<span style="left:342px;" id="'.$prefix.'_countDown_sec">'.$sect.'</span>
</div>

add_shortcode('countdown', 'countdown');
wp_register_script( 'countdown_head_JS', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
wp_enqueue_script( 'countdown_head_JS' );

第二步：将下面代码另存为countdownjs.js文件，并上传到主题js文件夹里：

function ShowCountDown(prefix,year,month,day,hourd,minuted,seconded){
var now = new Date();
if( typeof(hourd) == "undefined" ) hourd=23;
if( typeof(minuted) == "undefined" ) minuted=59;
if( typeof(seconded) == "undefined" ) seconded=59;
var endDate = new Date(year, month-1, day, hourd, minuted,seconded);
var leftTime=endDate.getTime()-now.getTime();
var leftsecond = parseInt(leftTime/1000);
var day=Math.floor(leftsecond/(60*60*24));
day = day < 0 ? 0 : day;
var hour=Math.floor((leftsecond-day*24*60*60)/3600);
hour = hour < 0 ? 0 : hour;
var minute=Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
minute = minute < 0 ? 0 : minute;
var second=Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60);
second = second < 0 ? 0 : second;
//var day2 = (day<10?"0"+day:day);
var hour2 = (hour<10?"0"+hour:hour);
var minute2 = (minute<10?"0"+minute:minute);
var second2 = (second<10?"0"+second:second);

jQuery("#"+prefix+"_countDown_day").html(day);
jQuery("#"+prefix+"_countDown_hour").html(hour2);
jQuery("#"+prefix+"_countDown_min").html(minute2);
jQuery("#"+prefix+"_countDown_sec").html(second2);

}

如上我们可以看到我们在显示层，

jQuery("#"+prefix+"_countDown_day").html(day);
jQuery("#"+prefix+"_countDown_hour").html(hour2);
jQuery("#"+prefix+"_countDown_min").html(minute2);
jQuery("#"+prefix+"_countDown_sec").html(second2);