wordpress图文教程

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

2024年7月5日
酒醒

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

方法一：

要在WordPress站点中添加倒计时功能，您可以使用JavaScript和HTML来实现。以下是一些基本步骤：

  1. 打开您的WordPress管理后台，并进入您要添加倒计时的页面或帖子编辑器。
  2. 在页面或帖子编辑器中，切换到”文本”编辑模式，这将允许您插入自定义HTML和JavaScript代码。
  3. 在您希望显示倒计时的地方插入以下HTML代码：
<div id="countdown">
  <div id="timer"></div>
</div>

这会创建一个包含倒计时的DIV元素。您可以根据需要自定义DIV的样式。

在页面底部插入以下JavaScript代码，以设置和启动倒计时：

<script>
  // 设置目标日期，倒计时结束日期
  var targetDate = new Date('20231231 23:59:59').getTime();
 
  // 更新倒计时函数
  function updateCountdown() {
    var currentDate = new Date().getTime();
    var timeLeft = targetDate  currentDate;
 
    var days = Math.floor(timeLeft / (1000  60  60  24));
    var hours = Math.floor((timeLeft % (1000  60  60  24)) / (1000  60  60));
    var minutes = Math.floor((timeLeft % (1000  60  60)) / (1000  60));
    var seconds = Math.floor((timeLeft % (1000  60)) / 1000);
 
    document.getElementById('timer').innerHTML = days  ' 天 '  hours  ' 小时 '  minutes  ' 分钟 '  seconds  ' 秒';
 
    // 如果倒计时结束，显示消息
    if (timeLeft <= 0) {
      document.getElementById('timer').innerHTML = '倒计时结束！';
    }
  }
 
  // 每秒更新倒计时
  var countdownInterval = setInterval(updateCountdown, 1000);
 
  // 首次加载时运行更新函数
  updateCountdown();
</script>

在上述代码中，您需要更改targetDate变量的值以设置倒计时的目标日期和时间。

保存您的页面或帖子，并在前台查看站点以查看添加的倒计时功能。
请注意，这只是一个简单的示例，您可以根据自己的需求和设计对倒计时进行样式和布局的自定义。确保在编辑WordPress页面时小心插入自定义代码，以免破坏您的站点布局或功能。最好在使用此方法之前备份您的网站。

方法二：

在WordPress中创建一个倒计时通常涉及到使用JavaScript来在特定时间内更新和显示剩余时间。以下是一个简单的倒计时功能示例，该功能可以嵌入WordPress页面中。

首先，在WordPress后台创建一个页面。
在页面编辑器中，添加以下HTML和JavaScript代码：

<div id="countdown">
    <span id="days">00</span> 天
    <span id="hours">00</span> 小时
    <span id="minutes">00</span> 分钟
    <span id="seconds">00</span> 秒
</div>

<script>
function countdown() {
    var endTime = new Date("December 31, 2023 23:59:59").getTime(); // 设置倒计时结束时间
    var now = new Date().getTime();
    var timeLeft = endTime - now;

    var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

    document.getElementById("days").innerHTML = days < 10 ? "0" + days : days;
    document.getElementById("hours").innerHTML = hours < 10 ? "0" + hours : hours;
    document.getElementById("minutes").innerHTML = minutes < 10 ? "0" + minutes : minutes;
    document.getElementById("seconds").innerHTML = seconds < 10 ? "0" + seconds : seconds;

    if (timeLeft < 0) {
        clearInterval(interval);
        document.getElementById("countdown").innerHTML = "倒计时结束";
    }
}

countdown();
var interval = setInterval(countdown, 1000);
</script>

在这个例子中，倒计时设置为2023年12月31日23:59:59。你可以根据需要更改结束时间。记得将这段代码放在你想要显示倒计时的页面中。当倒计时结束时，页面上的显示会更新为”倒计时结束”。