进步始于交流
收获源于分享

wordpress博客文章页面添加活动倒计时

基于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 = '<span style="color: #de0000; font-size: 14pt;"><i class="fa fa-clock-o"></i> 本活动还有:</span>';
document.getElementById('day').innerHTML ='<span style="color: #de0000; font-size: 14pt;">'+ getDay +'</span>天';
document.getElementById('hour').innerHTML ='<span style="color: #de0000; font-size: 14pt;">'+ getHour +'</span>小时';
document.getElementById('min').innerHTML ='<span style="color: #de0000; font-size: 14pt;">'+ getMinute +'</span>分钟';
document.getElementById('sec').innerHTML ='<span style="color: #de0000; font-size: 14pt;">'+ getSecond +'</span>秒结束';
}else{
document.getElementById('countdown').innerHTML= '<strong><span style="font-size: 13pt;">本活动已经结束!</span></strong>'
}
}

 

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、在需要倒计时的位置插入以下段代码即可:

[countdown time="2019-12-24 23:59:59"]

其中 time=”2019-12-24 23:59:59″引号中的是结束时间,格式需保持一致!

如果觉得每次都需要手动输入短代码觉得麻烦,可以在文本编辑器内添加活动倒计时快捷按钮。
把以下代码放到主题的functions.php内即可

//活动倒计时快捷标签按钮
function appthemes_add_countdown() {
?&gt;
<script type="text/javascript">
        if ( typeof QTags != 'countdown' ) {
            QTags.addButton( 'countdown', '活动倒计时', '[countdown time="2019-03-24 23:59:59"]','' );
        }
    </script>
<!--?php &lt;br ?-->
}
add_action('admin_print_footer_scripts', 'appthemes_add_countdown' );

 
效果预览

赞(0) 打赏
未经允许不得转载:歪虎网 » wordpress博客文章页面添加活动倒计时

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

百度搜索:歪虎网

注册/登录昔年业务网

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏