纯代码为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"><i class="fa fa-star-o">&nbsp;&nbsp;&nbsp;</i><strong><span style="font-size: 16pt; color: #3366ff;">每日福利赚提醒您：</span></strong>
<span id="time" style="font-size: 16pt; color: #3366ff;"></span>
<span id="day" style="font-size: 16pt; color: #ff0000;"></span>
<span id="hour" style="font-size: 16pt; color: #ff0000;"></span>
<span id="min" style="font-size: 16pt; color: #ff0000;"></span>
<span id="sec" style="font-size: 16pt; color: #ff0000;"></span><span style="font-size: 16pt; color: #3366ff;">结束</span>
</div>
';
}else{
return '<strong><span style="font-size: 16pt; color: #3366ff;">本次活动已经结束</span></strong>';
}
}
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=“2019-01-15 18:41:57”]

其中 time=”2019-01-15 18:41:57″引号中的时间就是活动结束时间，修改为其他日期时间时请保持格式一致即可。

4、为了方便添加倒计时，所以添加到后台文本编辑器中集成该短代码。将以下代码放入 functions.php 中即可

// 为了方便使用，在后台文本编辑器中集成该短代码。将以下代码放入 functions.php 中即可：
function lxtx_wpsites_add_gzh_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'hddjs', ' 倒计时', 'n[countdown time="2020-12-31 18:41:57"]', "" );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'lxtx_wpsites_add_gzh_quicktags' );

赏 支付宝扫码打赏 微信打赏

如果我的文章对你有帮助，欢迎移至上方按钮打赏