这篇文章距离上次修改已过半年,其中的信息可能已经有所发展或是发生改变。

转换为语音并朗读全文 00:00 / 00:00

效果请见:这是一个文章倒计时

使用方法

第一步:将下面代码贴到functions.php里

/* 
文章倒计时短代码
Code by www.yuxiaoxi.com
*/
function BYMT_countdown($atts, $content=null) {
extract(shortcode_atts(array("time" => ''), $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;
global $endtimes;
$endtimes = str_replace(array("-"," ",":"),",",$time);
if($endtime>$nowtime){
return '
<div class="reply-to-read">这里面是什么内容?倒计时结束后,马上为您揭晓!还剩:
<div class="Countdownbox">
<div style="left:10px;" id="day">'.$day.'天</div>
<div style="left:125px;" id="hour">'.$hour.'时</div>
<div style="left:232px;" id="min">'.$min.'分</div>
<div style="left:342px;" id="sec">'.$sect.'秒</div>
</div></div>
';
}else{
return $content;
}
}
function BYMT_countdown_foot_JS() {
global $endtimes;
echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
}
add_shortcode('countdown', 'BYMT_countdown');
add_action('wp_footer', 'BYMT_countdown_foot_JS');
wp_register_script( 'BYMT_countdown_head_JS', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
wp_enqueue_script( 'BYMT_countdown_head_JS' );

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

function add0(time){
if(time<10){
return "0"+time;
}else{
return time;
}
}
var interval = 1000;
function ShowCountDown(year,month,day,hourd,minuted)
{
var now = new Date();
var endDate = new Date(year, month-1, day, hourd, minuted);
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 = add0(day)
var hour2 = add0(hour)
var minute2 = add0(minute)
var second2 = add0(second)
$("#day").html(day2);
$("#hour").html(hour2);
$("#min").html(minute2);
$("#sec").html(second2);
}

第三步:在主题style.css里添加以下css代码

.Countdownbox{width:456px; height:116px; position:relative; background: url(images/Countdown.jpg) center center no-repeat; margin:0 auto;}
.Countdownbox div{width:70px;height:90px;text-align:center;font:bold 50px/91px arial;color:#fff;position:absolute;top: 15px;}

第四步:把下面的图片,上传到主题images文件夹里

Countdown

第五步:向后台编辑器添加按钮

QTags.addButton( 'countdown', '文章倒计时', '[countdown time=""]倒计时完成后显示的内容[/countdown]' );

这里的time就是倒计时结束的时间,格式是Y-m-d H:i:s 例如:2013-08-03 18:55:57

OK,大功告成!
演示

带符号 * 的表示必填项
  1. 爱在发烧
    爱在发烧

    永远相信下一秒是幸福的~每日打卡,打卡时间:上午2:48:54

    回复
  2. 诸葛小觉
    诸葛小觉

    你的博客现在去掉了这个功能吧,上一篇里面的测试文章效果不好了

    回复
  3. 书带草
    书带草

    请问第五步:向后台编辑器添加按钮 怎么做啊,修改哪里?<blockquote> :grin: :grin: 好羞射,文章真的好赞啊,顶博主!</blockquote>

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @书带草 添加在您的主题短代码文件里

      回复
      1. 书带草
        书带草

        @麦田一根葱 主题没有这个文件啊,以前都是在function里添短代码的

        回复
  4. ray
    ray

    这个效果不错<blockquote>签到成功!签到时间:下午9:46:11,每日打卡,生活更精彩哦~</blockquote>

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @ray 但是我觉得代码比较长,影响加载速度,也没什么实用性,所有在BYMT主题最新版已经去掉了这个功能。

      回复
  5. 外贸网站建设
    外贸网站建设

    感觉没什么 用

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @外贸网站建设 这个可以事先写一篇文章,然后就这个短代码包起来,倒计时结束后内容就显示出来了。

      回复
  6. Javin
    Javin

    短代码现在很流行啊

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @Javin 是啊,主要是方便

      回复
  7. 一季花落
    一季花落

    还是想看演示 俱体什么作用

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @一季花落 :!: 好吧,我在文章最后再次放上演示链接

      回复
      1. 一季花落
        一季花落

        @麦田一根葱 嗯 等着呢

        回复
        1. 麦田一根葱
          麦田一根葱博主

          @一季花落 已经加上,你看吧

          回复
  8. 神父
    神父

    亲,木有演示

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @神父 效果请见:这是一个文章倒计时 :o

      回复
      1. 微历史
        微历史

        尝试一下!

        回复