一号优惠经验分享网
51福利网的各种薅羊毛福利经验笔记

纯代码实现wordpress站点活动倒计时效果

[countdown time=”2023-05-31 23:59:59″]

由于本站的一部分是活动发布的内容,所以说倒计时功能对于我来说非常重要,wordpress上面的一些插件要就是功能单一,要么就是收费超级贵,对于我这种建站技术半斤八两的人来说当然是选择百度搜一搜,哈哈!

51福利网

折腾半天终于算是基本达到了我的要求,而且只需要添加一段代码就可以实现,相比于那些收费插件感觉还是优点多多。

  • 功能简洁实用
  • 纯代码实现
  • 可以在单独页面设置单独的倒计时

那么下面就介绍一下改怎么去实现下方所示的倒计时效果。

最终效果:


纯代码添加倒计时到 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 class="mark_c mark">		
		<div id="countdown">
			<strong><div class="text"style=" text-align:center;"><span style="color:black;font-size:16px;"><span id="time"></span></span>
			<span style="color:red;font-size:16px;"><span id="day"></span></span><span style="color:black;font-size:16px;">天</span>
			<span style="color:red;font-size:16px;"><span id="hour"></span></span><span style="color:black;font-size:16px;"> 时</span>
			<span style="color:red;font-size:16px;"><span id="min"></span></span><span style="color:black;font-size:16px;"> 分</span>
			<span style="color:red;font-size:16px;"><span id="sec"></span></span><span style="color:black;font-size:16px;"> 秒</span></div></div></strong>
		</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、在发布/更新文章的时候,切换到文末模式,然后在想要插入倒计时的位置添加以下短代码:

在发布/更新文章的时候,切换到文末模式,然后在想要插入倒计时的位置添加以下短代码,去掉两边[]之间的空格。

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

[ countdown time="2021-01-01 18:41:57" ]

打赏
一号优惠 · 51福利网薅羊毛福利具有时效性,如已失效,请留言
文章名称:《纯代码实现wordpress站点活动倒计时效果》-一号优惠 · 51福利网
免责申明:本站所有活动信息均来自网络,如有失效,不实或侵权,请联系我们删除。谢谢

评论 抢沙发

一号优惠经验分享网最新最全薅羊毛,现金红包线报网

一号优惠经验分享网提供每日最新内部优惠,薅羊毛活动,现金红包领取,免费福利和网赚福利手机赚钱线报,打造中国最受欢迎的网赚信息发布平台!51福利网

51联盟线报群赚钱·合作·帮助

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

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册