WordPress循环倒计时计时器实现教程-html教程-PHP中文网

WordPress循环倒计时计时器实现教程

本教程详细介绍了如何在wordpress网站中集成一个每周循环的倒计时计时器。文章将深入解析实现这一功能的javascript逻辑和html结构，并指出常见的设置错误（如缺少html元素）。此外，教程还将提供完整的代码示例、wordpress集成最佳实践以及如何根据需求自定义倒计时时间点和星期，帮助用户轻松创建功能完善的循环倒计时。

在现代网站中，倒计时计时器被广泛应用于各种场景，例如限时促销、活动预告或直播开始提醒。对于需要每周重复进行的事件，一个能够自动重置并循环的倒计时器尤为实用。本教程将指导您在WordPress网站中实现这样一个功能，确保其稳定运行并提供自定义选项。

1. 核心JavaScript逻辑解析

实现循环倒计时主要依赖于一段JavaScript代码，它负责计算时间差、更新显示并处理计时器的重置。

1.1 全局变量

var secTime; // 存储当前剩余的秒数
var ticker;  // 存储setInterval的ID，用于清除计时器

登录后复制

secTime 用于跟踪倒计时剩余的总秒数，ticker 则用于管理 setInterval 函数，以便在倒计时结束时能够停止并重新启动。

1.2 getSeconds() 函数：初始化与重置

这个函数是倒计时逻辑的核心，负责计算下一次目标时间点与当前时间的差值，并处理跨周逻辑。

function getSeconds() {
  var nowDate = new Date(); // 获取当前日期和时间
  var dy = 1; // 目标星期几 (0=周日, 1=周一, ..., 6=周六)
  // 设置目标时间：例如，当前日期的21:00:00 (即晚上9点)
  var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 21, 0, 0);

  var curtime = nowDate.getTime(); // 当前时间的毫秒数
  var atime = countertime.getTime(); // 目标时间的毫秒数
  var diff = parseInt((atime - curtime) / 1000); // 计算时间差（秒）

  var curday; // 存储距离目标星期的天数
  if (diff > 0) {
    curday = dy - nowDate.getDay(); // 如果目标时间在未来，计算当前到目标星期的天数
  } else {
    curday = dy - nowDate.getDay() - 1; // 如果目标时间已过，计算到下周目标星期的天数
  }
  if (curday < 0) {
    curday += 7; // 如果目标星期在当前星期之前，则跳到下一周
  }
  if (diff <= 0) {
    diff += (86400 * 7); // 如果目标时间已过，则增加一周的秒数
  }
  startTimer(diff); // 启动计时器
}

登录后复制

目标星期 dy: 设定倒计时结束的星期几。例如，dy = 1 表示目标是周一。
目标时间 countertime: 设定倒计时结束的具体时间点。这里设置为当前日期的晚上9点 (21, 0, 0)。
时间差 diff: 计算当前时间与目标时间之间的秒数差。
跨周逻辑: 如果目标时间已过，或目标星期在当前星期之前，代码会自动调整 curday 和 diff，使倒计时指向下一个有效的目标时间点。

1.3 startTimer() 函数：启动计时器

function startTimer(secs) {
  secTime = parseInt(secs); // 初始化剩余秒数
  ticker = setInterval("tick()", 1000); // 每秒调用一次tick()函数
  tick(); // 立即调用一次tick()以显示初始值
}

登录后复制

此函数接收计算出的总秒数，并使用 setInterval 每隔一秒调用 tick() 函数，从而实现动态更新。

1.4 tick() 函数：更新显示

function tick() {
  var secs = secTime;
  if (secs > 0) {
    secTime--; // 每秒递减
  } else {
    clearInterval(ticker); // 倒计时结束，清除计时器
    getSeconds(); // 重新启动倒计时（指向下一周）
  }

  // 将总秒数分解为天、小时、分钟、秒
  var days = Math.floor(secs / 86400);
  secs %= 86400;
  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;

  // 更新HTML元素显示
  document.getElementById("days").innerHTML = curday; // 注意：这里使用了全局变量curday
  document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "") + hours;
  document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "") + mins;
  document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "") + secs;
}

登录后复制

tick() 函数是每秒执行一次的更新器。
当 secTime 归零时，它会清除当前的 setInterval 并再次调用 getSeconds()，实现倒计时的循环。
它将剩余的总秒数转换为天、小时、分钟和秒，并更新相应的HTML元素。

2. HTML结构与显示

为了显示倒计时，我们需要在页面中定义相应的HTML元素，并通过它们的 id 属性与JavaScript进行关联。

<h6>Live in <span class="days" id="days"></span><span class="smalltext"> days,</span>
  <span class="hours" id="hours"></span><span class="smalltext"> hours,</span>
  <span class="minutes" id="minutes"></span><span class="smalltext"> minutes,</span>
  <span class="seconds" id="seconds"></span><span class="smalltext"> seconds</span>
</h6>

登录后复制

id 属性的重要性: JavaScript通过 document.getElementById() 方法来查找并更新这些 zuojiankuohaophpcnspan> 元素的内容。因此，id="days", id="hours", id="minutes", id="seconds" 必须准确无误。
常见错误: 初始问题中，HTML代码缺少了 id="seconds" 的 <span> 元素，导致秒数无法显示。请务必确保所有需要显示时间单位的元素都已正确定义。

3. WordPress集成方法

在WordPress中集成这段代码有几种方式，考虑到兼容性和最佳实践，推荐以下方法。

3.1 引入JavaScript

方法一：使用主题的 functions.php (推荐)

这是在WordPress中引入脚本的最佳实践。将JavaScript代码保存为一个 .js 文件（例如 countdown.js），然后通过 wp_enqueue_script 函数将其引入。

在您的主题（或子主题）目录下创建一个 js 文件夹（如果不存在），并将上述JavaScript代码保存为 countdown.js。

编辑主题的 functions.php 文件，添加以下代码：

<?php
function enqueue_countdown_script() {
    // 注册脚本
    wp_register_script( 'custom-countdown', get_template_directory_uri() . '/js/countdown.js', array(), '1.0.0', true );
    // 检查是否在需要倒计时的页面，然后加载脚本
    // 例如，只在首页加载：is_front_page()
    // 或在特定文章/页面加载：is_single('post-slug') 或 is_page('page-slug')
    // 这里为了演示，假设在所有页面加载
    wp_enqueue_script( 'custom-countdown' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_countdown_script' );
?>

登录后复制

true 作为 wp_enqueue_script 的第五个参数意味着脚本将被放置在 </body> 标签之前，这有助于提高页面加载性能，并确保DOM元素在脚本执行时已加载。

方法二：直接在页面或文章中添加 (不推荐用于复杂脚本)

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

如果您只需要在一个特定页面使用，并且脚本不复杂，可以直接通过WordPress编辑器的“自定义HTML”或“代码块”添加 <script> 标签。但这种方式不利于维护和性能优化。

<script>
// 这里放置完整的JavaScript代码
var secTime;
var ticker;

function getSeconds() {
  var nowDate = new Date();
  var dy = 1; //Sunday through Saturday, 0 to 6
  var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 21, 0, 0); //20 out of 24 hours = 8pm

  var curtime = nowDate.getTime(); //current time
  var atime = countertime.getTime(); //countdown time
  var diff = parseInt((atime - curtime) / 1000);
  if (diff > 0) {
    curday = dy - nowDate.getDay()
  } else {
    curday = dy - nowDate.getDay() - 1
  } //after countdown time
  if (curday < 0) {
    curday += 7;
  } //already after countdown time, switch to next week
  if (diff <= 0) {
    diff += (86400 * 7)
  }
  startTimer(diff);
}

function startTimer(secs) {
  secTime = parseInt(secs);
  ticker = setInterval("tick()", 1000);
  tick(); //initial count display
}

function tick() {
  var secs = secTime;
  if (secs > 0) {
    secTime--;
  } else {
    clearInterval(ticker);
    getSeconds(); //start over
  }

  var days = Math.floor(secs / 86400);
  secs %= 86400;
  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;

  //update the time display
  document.getElementById("days").innerHTML = curday;
  document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "") + hours;
  document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "") + mins;
  document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "") + secs;
}

// 确保DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', getSeconds);
</script>

登录后复制

3.2 引入HTML

将上面提供的HTML结构放置在您希望显示倒计时计时器的WordPress页面或文章内容中。在WordPress编辑器中，您可以使用“自定义HTML”块来插入这段代码。

<h6>Live in <span class="days" id="days"></span><span class="smalltext"> days,</span>
  <span class="hours" id="hours"></span><span class="smalltext"> hours,</span>
  <span class="minutes" id="minutes"></span><span class="smalltext"> minutes,</span>
  <span class="seconds" id="seconds"></span><span class="smalltext"> seconds</span>
</h6>

登录后复制

3.3 启动计时器

原始代码使用 <body> 标签的 onload 事件来启动 getSeconds() 函数。在WordPress环境中，直接修改 <body> 标签通常不方便。

推荐的启动方式： 如果您的JavaScript是通过 wp_enqueue_script 并在页脚加载的，或者您将脚本直接放在页面底部，那么最简单的启动方式是在脚本的末尾添加：

document.addEventListener('DOMContentLoaded', getSeconds);
// 或者如果脚本在</body>前加载，可以直接调用
// getSeconds();

登录后复制

DOMContentLoaded 事件确保在HTML文档完全加载和解析后执行 getSeconds()，避免因为元素未加载而导致的错误。

4. 完整代码示例

JavaScript (保存为 countdown.js):

var secTime;
var ticker;
var curday; // 确保 curday 在全局或至少在 getSeconds() 外部声明，以便 tick() 可以访问

function getSeconds() {
  var nowDate = new Date();
  var dy = 1; // 目标星期几 (0=周日, 1=周一, ..., 6=周六)。例如，1代表周一。
  // 设置目标时间：例如，当前日期的上午9:30:00
  // new Date(year, month, day, hours, minutes, seconds)
  // month 是 0-11，所以 9月是 8
  // 示例：周日 9:30 AM
  // var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 9, 30, 0);

  // 示例：周日 11:00 AM
  var targetHour = 11; // 小时 (0-23)
  var targetMinute = 0; // 分钟 (0-59)
  var targetDayOfWeek = 0; // 目标星期几 (0=周日, 1=周一, ..., 6=周六)

  var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), targetHour, targetMinute, 0);

  var curtime = nowDate.getTime(); // 当前时间的毫秒数
  var atime = countertime.getTime(); // 目标时间的毫秒数
  var diff = parseInt((atime - curtime) / 1000); // 计算时间差（秒）

  if (diff > 0) {
    curday = targetDayOfWeek - nowDate.getDay();
  } else {
    // 如果目标时间已过，则计算到下周的目标星期
    curday = targetDayOfWeek - nowDate.getDay() - 1;
  }

  if (curday < 0) {
    curday += 7; // 如果目标星期在当前星期之前，则跳到下一周
  }

  if (diff <= 0) {
    // 如果目标时间已过，则增加一周的秒数
    diff += (86400 * 7);
  }

  startTimer(diff);
}

function startTimer(secs) {
  secTime = parseInt(secs);
  ticker = setInterval(tick, 1000); // 推荐使用函数引用而不是字符串
  tick(); // 立即调用一次tick()以显示初始值
}

function tick() {
  var secs = secTime;
  if (secs > 0) {
    secTime--;
  } else {
    clearInterval(ticker); // 倒计时结束，清除计时器
    getSeconds(); // 重新启动倒计时（指向下一周）
  }

  // 将总秒数分解为天、小时、分钟、秒
  // 注意：这里的days是基于diff计算的，而不是curday
  var remainingDays = Math.floor(secs / 86400); // 剩余的天数
  secs %= 86400;
  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;

  // 更新HTML元素显示
  document.getElementById("days").innerHTML = curday; // 显示距离目标星期的天数
  document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "") + hours;
  document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "") + mins;
  document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "") + secs;
}

// 确保DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', getSeconds);

登录后复制

HTML (放置在WordPress页面/文章中):

<h6>Live in <span class="days" id="days"></span><span class="smalltext"> days,</span>
  <span class="hours" id="hours"></span><span class="smalltext"> hours,</span>
  <span class="minutes" id="minutes"></span><span class="smalltext"> minutes,</span>
  <span class="seconds" id="seconds"></span><span class="smalltext"> seconds</span>
</h6>

登录后复制

5. 自定义与注意事项

5.1 自定义目标时间

要将倒计时设置为特定的时间（例如每周日9:30 AM或11:00 AM），您需要修改 getSeconds() 函数中的 targetDayOfWeek、targetHour 和 targetMinute 变量：

// 在 getSeconds() 函数内部
var targetDayOfWeek = 0; // 0=周日, 1=周一, ..., 6=周六
var targetHour = 9;      // 目标小时 (0-23)
var targetMinute = 30;   // 目标分钟 (0-59)

var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), targetHour, targetMinute, 0);

登录后复制

通过调整 targetDayOfWeek, targetHour, targetMinute 的值，您可以精确控制倒计时的结束时间。

5.2 多个倒计时实例

当前代码设计为单个倒计时。如果需要在同一页面上显示多个独立的倒计时，则需要重构代码，将其封装成一个可复用的类或工厂函数，并为每个倒计时实例创建独立的变量和HTML元素ID。

5.3 样式调整

您可以通过CSS来美化倒计时显示。例如，使用 .days, .hours, .minutes, .seconds 类或直接通过 id 来添加样式。

/* 示例CSS */
h6 {
  font-size: 24px;
  color: #333;
}
span {
  font-weight: bold;
  color: #e44d26;
}
.smalltext {
  font-size: 0.7em;
  color: #666;
  margin-right: 5px;
}

登录后复制

5.4 WordPress最佳实践

避免内联脚本和样式: 尽量将JavaScript代码放在 .js 文件中，CSS代码放在 .css 文件中，并通过 wp_enqueue_script 和 wp_enqueue_style 引入。
使用子主题: 在修改主题文件（如 functions.php）时，务必使用子主题，以防止主题更新覆盖您的更改。
性能考量: 复杂的JavaScript可能会影响页面加载性能。确保代码优化，并在必要时考虑使用缓存插件。

总结

通过本教程，您应该已经掌握了在WordPress网站中实现一个每周循环倒计时计时器的方法。关键在于理解JavaScript的日期处理逻辑、正确设置HTML元素ID以及遵循WordPress的最佳实践进行集成。通过适当的自定义，您可以创建满足特定需求的计时器，为您的用户提供更好的体验。记得在部署前进行充分测试，确保计时器在各种情况下都能正常工作。

以上就是WordPress循环倒计时计时器实现教程的详细内容，更多请关注php中文网其它相关文章！