WordPress纯代码为网站或文章添加倒计时功能

小编

发表文章数:84

热门标签

首页 » WordPress » WordPress纯代码为网站或文章添加倒计时功能

这个教程很实用,特别是发布某些活动,是活动肯定有截止日期,所以博客在发布活动类型的文章底部添加一个活动结束倒计时还是不错的,WordPress通用。下面菜鸟IT资源网就来介绍下使用方法

纯代码添加倒计时到 WordPress

1、把下面的代码保存为 countdownjs.js,保存在当前所使用主题的 js/目录里一定要注意路径:

  1. function ShowCountDown(prefix,year,month,day,hourd,minuted,seconded){
  2. var now = new Date();
  3. if( typeof(hourd) == “undefined” ) hourd=23;
  4. if( typeof(minuted) == “undefined” ) minuted=59;
  5. if( typeof(seconded) == “undefined” ) seconded=59;
  6. var endDate = new Date(year, month1, day, hourd, minuted,seconded);
  7. var leftTime=endDate.getTime()-now.getTime();
  8. var leftsecond = parseInt(leftTime/1000);
  9. var day=Math.floor(leftsecond/(60*60*24));
  10. day = day < 0 ? 0 : day;
  11. var hour=Math.floor((leftsecondday*24*60*60)/3600);
  12. hour = hour < 0 ? 0 : hour;
  13. var minute=Math.floor((leftsecondday*24*60*60hour*3600)/60);
  14. minute = minute < 0 ? 0 : minute;
  15. var second=Math.floor(leftsecondday*24*60*60hour*3600minute*60);
  16. second = second < 0 ? 0 : second;
  17. //var day2 = (day<10?”0″+day:day);
  18. var hour2 = (hour<10?“0”+hour:hour);
  19. var minute2 = (minute<10?“0”+minute:minute);
  20. var second2 = (second<10?“0”+second:second);
  21.  
  22. jQuery(“#”+prefix+“_countDown_day”).html(day);
  23. jQuery(“#”+prefix+“_countDown_hour”).html(hour2);
  24. jQuery(“#”+prefix+“_countDown_min”).html(minute2);
  25. jQuery(“#”+prefix+“_countDown_sec”).html(second2);
  26.  
  27. }

2、复制下列代码,加入主题的function.php中 (注意倒数第二行的js文件路径,根据你主题的情况更改。)

  1. function Brain_countdown($atts, $content=null) {
  2. extract(shortcode_atts(array(“time” => ), $atts));
  3. extract(shortcode_atts(array(“prefix” => ), $atts));
  4. date_default_timezone_set(‘PRC’);
  5. $endtime=strtotime($time);
  6. $nowtime=time();
  7. $counttime=$endtime$nowtime;
  8. $day=floor($counttime/(60*60*24));
  9. $day=$day<10 ? “0”.$day : $day;
  10. $hour=floor(($counttime$day*24*60*60)/3600);
  11. $hour=$hour<10 ? “0”.$hour : $hour;
  12. $min=floor(($counttime$day*24*60*60$hour*3600)/60);
  13. $min=$min<10 ? “0”.$min : $min;
  14. $sect=floor($counttime$day*24*60*60$hour*3600$min*601);
  15. $sect=$sect<10 ? “0”.$sect : $sect; $endtimes = str_replace(array(“-“,” “,“:”),“,”,$time); if($endtime>$nowtime){
  16. return 
  17. <div class=”countDownCont”>活动倒计时: <span id=”‘.$prefix.‘_countDown_day” style=”left: 10px;”>’.$day.‘</span>天 <span id=”‘.$prefix.‘_countDown_hour” style=”left: 125px;”>’.$hour.‘</span>时 <span id=”‘.$prefix.‘_countDown_min” style=”left: 232px;”>’.$min.‘</span>分 <span id=”‘.$prefix.‘_countDown_sec” style=”left: 342px;”>’.$sect.‘</span>秒</div>
  18. <script>window.setInterval(function(){ShowCountDown(“‘.$prefix.‘” , ‘.$endtimes.‘ );}, 1000);</script> ‘; }else{ return$content; } } add_shortcode(‘countdown’, ‘Brain_countdown’); wp_register_script( ‘Brain_countdown_head_JS’,get_template_directory_uri() . ‘/js/countdownjs.js’, array(), ‘1.0’, false ); wp_enqueue_script( ‘Brain_countdown_head_JS’ );

3、在发布/更新文章的时候,切换到文章文本模式,然后在想要插入倒计时的位置添加以下短代码:

  1. [countdown time=‘2019-01-15 20:30:30’ prefix=‘pro1’]活动已结束[/countdown]

其中 time=’2019-01-15 20:30:30’引号中的时间就是活动结束时间,修改为其他日期时间时请保持格式一致即可。

如图:

WordPress纯代码为网站或文章添加倒计时功能

未经允许不得转载:作者:小编, 转载或复制请以 超链接形式 并注明出处 守望者软件开发工作室
原文地址:《WordPress纯代码为网站或文章添加倒计时功能》 发布于2020-01-27

分享到:
赞(0) 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册