纯代码为WordPress站点添加倒计时功能

前两天模板下载吧分享了通过安装一个 Countdown Timer Ultimate 插件来实现为 WordPress 站点添加倒计时的功能,详见『如何添加一个倒计时到 WordPress 网站中?』,虽然很方便但是部分站长对插件天生不喜,所以今天就给大家转载分享一个纯代码的办法来为 WordPress 站点添加倒计时。

纯代码为WordPress站点添加倒计时功能

纯代码添加倒计时到 WordPress 站点步骤

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

  1. function getAdd(time){
  2. if(time<10){
  3. return "0"+time;
  4. }else{
  5. return time;
  6. }
  7. }
  8. var interval = 1000;
  9. function ShowCountDown(year,month,day,hourd,minuted){
  10. var now = new Date();
  11. var endDate = new Date(year, month-1, day, hourd, minuted);
  12. var leftTime = endDate.getTime() - now.getTime();
  13. var leftsecond = parseInt(leftTime/1000);
  14. var day = Math.floor(leftsecond/(60*60*24));
  15. day = day < 0 ? 0 : day;
  16. var hour = Math.floor((leftsecond-day*24*60*60)/3600);
  17. hour = hour < 0 ? 0 : hour;
  18. var minute = Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
  19. minute = minute < 0 ? 0 : minute;
  20. var second = Math.floor(leftsecond-day*24*60*60-hour*3600-minute*60);
  21. second = second < 0 ? 0 : second;
  22. var getDay = getAdd(day);
  23. var getHour = getAdd(hour);
  24. var getMinute = getAdd(minute);
  25. var getSecond = getAdd(second);
  26. if(endDate > now){
  27. document.getElementById('time').innerHTML = '活动倒计时:';
  28. document.getElementById('day').innerHTML = getDay +'天';
  29. document.getElementById('hour').innerHTML = getHour +'时';
  30. document.getElementById('min').innerHTML = getMinute +'分';
  31. document.getElementById('sec').innerHTML = getSecond +'秒';
  32. }else{
  33. document.getElementById('countdown').innerHTML= '本次活动已经结束'
  34. }
  35. }

2、把下面的代码添加到当前主题的 functions.php 文件最后一个 ?> 的前面:

  1. function countdown($atts, $content=null) {
  2. extract(shortcode_atts(array("time" => ''), $atts));
  3. date_default_timezone_set('PRC');
  4. $endtime=strtotime($time);
  5. $nowtime=time();
  6. global $endtimes;
  7. $endtimes = str_replace(array("-"," ",":"),",",$time);
  8. if($endtime>$nowtime){
  9. return '
  10. <div id="countdown">
  11. <span id="time"></span>
  12. <span id="day"></span>
  13. <span id="hour"></span>
  14. <span id="min"></span>
  15. <span id="sec"></span>
  16. </div>
  17. ';
  18. }else{
  19. return '本次活动已经结束';
  20. }
  21. }
  22. function countdown_js() {
  23. global $endtimes;
  24. echo '<script>window.setInterval(function(){ShowCountDown('.$endtimes.');}, interval);</script>'."\n";
  25. }
  26. add_shortcode('countdown', 'countdown');
  27. add_action('wp_footer', 'countdown_js');
  28. wp_register_script( 'countdown_js', get_template_directory_uri() . '/js/countdownjs.js', array(), '1.0', false );
  29. wp_enqueue_script( 'countdown_js' );

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

  1. [countdown time="2019-03-15 18:41:57"]

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

纯代码为WordPress站点添加倒计时功能

小结

这个纯代码为 WordPress 站点添加倒计时还是非常简单易用的,只需要添加好 JS 文件和代码后,想添加倒计时就通过短代码来实现即可。如果担心忘记,我们还可以将倒计时的短代码集成到编辑器中。文章中的代码只是一种思路,倒计时的样式并没有美化,建议有需要的站长结合自己的主题来进行 DIY 会更好。

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 快速入门 纯代码为WordPress站点添加倒计时功能 https://www.mbxzb.com/blog/file/rumen/13939.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务