WordPress中定制短代码，实现倒计时功能

前两天在一个商城项目中，客户希望页面上出现一个活动倒计时的效果，为了方便调用，我想到利用短代码+参数实现任意调用。实现效果是这样的：
WordPress中定制短代码，实现倒计时功能

偷懒百度了一下，发现已有人实现出来，看这里。但他做的功能比较简单，首先参数必须完整，年月日时分秒一个都不能少，并且在一个页面上还只能出现一个倒计时，限制比较大。于是我在此基础上整理了下代码，完善了一下功能。

首先是PHP部分，以下代码加入主题的function.php

function Brain_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>
 
		<script>window.setInterval(function(){ShowCountDown("'.$prefix.'" , '.$endtimes.' );}, 1000);</script>
		';
	}else{
		return $content;
	}
}
 
add_shortcode('countdown', 'Brain_countdown');
wp_register_script( 'Brain_countdown_head_JS', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
wp_enqueue_script( 'Brain_countdown_head_JS' );

然后是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);
 
}

调用：
短代码

[countdown time='2016-7-10 20:30:30' prefix='pro1']活动已结束[/countdown]
[countdown time='2016-7-19' prefix='pro2']活动已结束[/countdown]
...

其中参数prefix允许在同一个页面调用多个不同的短代码，只要每个的prefix不同即可
标签内部的“活动已结束”可以改成任何文本或HTML代码
如果在time参数中把时分秒省略，会默认时分秒为23:59:59，也就是当天最后一秒，这对一些只需精确到天的倒计时还是比较有用的

也可以用do_shortcode在主题模板上直接调用：

1	echo do_shortcode("[countdown time='2016-7-10 20:30:30' prefix='pro1']活动已结束[/countdown]");

CSS部分就因人而异，不贴出来了。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/1176.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

9 关于 “WordPress中定制短代码，实现倒计时功能” 的评论

0.0 2015/07/28 于 2:06 下午

0..0

回复 ↓
ozin 2015/09/22 于 2:15 下午

博主你好，多谢你的分享。有个问题就是调用出来的倒计时数字是不会时时刷新的？有什么方法让他时时走动吗？

回复 ↓
1. Brain 文章作者2015/09/22 于 3:02 下午
  
  我这个倒计时就是实时走动的，不会走动可能你的JS调用有问题，也可能和本身页面上其他JS脚本有冲突
  
  回复 ↓
  1. ozin 2015/09/22 于 3:44 下午
    
    我也觉得应该是js调用的问题，换了几个主题试了都不行。wp_register_script( ‘Brain_countdown_head_JS’, get_template_directory_uri() . ‘/js/brain_countdown.js’, array(), ‘1.0’, false );上面这个地方我怎么改成绝对地址？想测试一下。另外JS是保存成 brain_countdownjs.js?
    
    回复 ↓
ozin 2015/09/22 于 4:07 下午

ok~ 多谢博主，已经弄好了。

回复 ↓
1. Brain 文章作者2015/09/22 于 10:03 下午
  
  你使我意识到文章里面的js文件名没统一起来，现已修正，多谢！
  
  回复 ↓
abc 2018/08/24 于 7:14 下午

你好，这个效果在普通的文章模式下，可以显示在文章摘要里或者标题里吗？
盼复谢谢

回复 ↓
1. Brain 文章作者2018/08/28 于 2:49 下午
  
  摘要应该可以，标题我不确定，但是你可以试试。本文只是一个引出，凡是短代码可以用得到的地方都可以使用，但是你需要自己验证
  
  回复 ↓
z 2019/10/30 于 8:57 上午

您好我直接根据上面步骤，可以显示但是无法实时走动，请问一下是什么问题？

回复 ↓

Brain的技术笔记

前端开发，视觉设计，WordPress，Web技术研究…

WordPress中定制短代码，实现倒计时功能

9 关于 “WordPress中定制短代码，实现倒计时功能” 的评论

发表回复取消回复

9 关于 “WordPress中定制短代码，实现倒计时功能” 的评论

发表回复 取消回复

发表回复取消回复