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

作者 : 小编 发布时间: 2020-01-27 共2809个字,阅读需8分钟。 共130 人阅读

阿里云服务器低至¥89元/年 限时抢

阿里云服务器专享1折起 | 限时抢各种代金券

立即抢购

腾讯云服务器低至¥50元/年 限时抢

腾讯云服务器专享1折起 | 1核2g服务器免费拿

立即购买

这个教程很实用,特别是发布某些活动,是活动肯定有截止日期,所以博客在发布活动类型的文章底部添加一个活动结束倒计时还是不错的,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’引号中的时间就是活动结束时间,修改为其他日期时间时请保持格式一致即可。

如图:

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可联系站长QQ,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!!!!
5. 如有链接无法下载、失效或广告,请联系管理员处理!本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7.如遇到加密压缩包,默认解压密码为"www.xiaosonshu.com",如遇到无法解压的请联系管理员!
8.如遇到充值未到账,请联系管理员补发!管理员整天在线,未回复等等待!
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
守望者软件开发工作室 » WordPress纯代码为网站或文章添加倒计时功能

发表评论

  • 23会员总数(位)
  • 143资源总数(个)
  • 0本周发布(个)
  • 0 今日发布(个)
  • 270稳定运行(天)

小松鼠资源网 XIAOSONSHU.COM 一个高级程序员模板开发平台!

立即查看 了解详情