给wordpress文章添加动态活动倒计时的功能

网站文章 2026-09-21 07:19:28 3 0

基于javascript实现的活动倒计时功能，可以实现动态倒计时效果，结合wordpress的短代码功能，还能实现一篇文章多个不同的活动倒计时，对于经常发布限时活动的wordpress站点会非常有用，让访客实时知道活动的剩余时间。

1、把下面的代码保存为countdownjs.js，保存在主题的js/目录里：

function getAdd(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 getDay = getAdd(day);
    var getHour = getAdd(hour);
    var getMinute = getAdd(minute);
    var getSecond = getAdd(second);
    if(endDate > now){
        document.getElementById('time').innerHTML = '活动倒计时：';
        document.getElementById('day').innerHTML = getDay +'天';
        document.getElementById('hour').innerHTML = getHour +'时';
        document.getElementById('min').innerHTML = getMinute +'分';
        document.getElementById('sec').innerHTML = getSecond +'秒'; 
    }else{
        document.getElementById('countdown').innerHTML= '本次活动已经结束'
    }
}

2、把下面的代码添加到主题的functions.php文件：

function countdown($atts, $content=null) {
    extract(shortcode_atts(array("time" => ''), $atts));
    date_default_timezone_set('PRC');
    $endtime=strtotime($time);
    $nowtime=time();
    global $endtimes;
    $endtimes = str_replace(array("-"," ",":"),",",$time);
    if($endtime>$nowtime){
        return '     
        <div id="countdown">
            <span id="time"></span>
            <span id="day"></span>
            <span id="hour"></span>
            <span id="min"></span>
            <span id="sec"></span>
        </div>
        ';
    }else{
        return '本次活动已经结束';
    }
}
function countdown_js() {
    global $endtimes;
    echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
}
add_shortcode('countdown', 'countdown');
add_action('wp_footer', 'countdown_js');
wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
wp_enqueue_script( 'countdown_js' );

3、在文章编辑窗口中添加短代码：

1	[countdown time="2016-07-09 18:41:57"]

其中 time=”2016-07-09 18:41:57″ 引号中的是结束时间，格式保持一致

扩展：

如果不需要短代码功能，可以把第2步的代码修改如下：

function countdown($time) {    
    date_default_timezone_set('PRC');
    $endtime=strtotime($time);
    $nowtime=time();
    global $endtimes;
    $endtimes = str_replace(array("-"," ",":"),",",$time);
    if($endtime>$nowtime){
        return '     
        <div id="countdown">
            <span id="time"></span>
            <span id="day"></span>
            <span id="hour"></span>
            <span id="min"></span>
            <span id="sec"></span>
        </div>
        ';
    }else{
        return '本次活动已经结束';
    }
}
function countdown_js() {
    global $endtimes;
    echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
}
add_action('wp_footer', 'countdown_js');
wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
wp_enqueue_script( 'countdown_js' );

然后在主题文件中添加调用代码：

1	<?php countdown('2016-07-09 17:29:00');?>

引号中的是结束时间格式，格式保持一致

文章说明

本文标签：

无标签

本站提供的一切软件、教程和游戏辅助仅限用于娱乐和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集，版权争议与本站无关。如有侵权请邮件与我们联系处理。敬请谅解！6594404@qq.com