如何将倒计时下载按钮改造为WordPress可用的定时显示文本按钮

以下是完整可直接使用的代码，所有样式内嵌，无需修改WordPress主题文件：

<!-- 内嵌样式 避免依赖主题CSS，可自行调整外观 -->
<style>
.download-container {
  margin: 20px 0;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #2385bb;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
}
.download-btn:hover {
  background: #1d6d9a;
}
.countdown {
  margin: 15px 0;
  font-size: 16px;
}
.countdown span {
  font-weight: bold;
  color: #2385bb;
}
.final-text {
  display: none;
  padding: 15px;
  background: #f0f8ff;
  border-left: 4px solid #2385bb;
  margin: 10px 0;
}
</style>
<!-- 引入FontAwesome图标，不需要图标可删除这行 -->
<script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script>

<div class="download-container">
  <a href="#" class="download-btn"> <i class="fas fa-clock"></i> 点击开始5分钟倒计时</a>
  <div class="countdown"></div>
  <!-- 倒计时结束后显示的内容，可任意自定义 -->
  <div class="final-text">
    这是倒计时结束后显示的指定文本，你可以任意修改这段内容，支持插入链接、图片等HTML元素。
  </div>
</div>

<script type="text/javascript">
  const downloadBtn = document.querySelector(".download-btn");
  const countdown = document.querySelector(".countdown");
  const finalText = document.querySelector(".final-text");
  // 倒计时时长：300秒=5分钟，可自行修改数值调整时长
  var timeLeft = 300;

  downloadBtn.addEventListener("click", (e) => {
    e.preventDefault();
    downloadBtn.style.display = "none";
    // 格式化时间为分:秒格式更直观
    let minutes = Math.floor(timeLeft / 60);
    let seconds = timeLeft % 60;
    countdown.innerHTML = "倒计时剩余：<span>" + minutes + "分" + seconds + "秒</span>";

    var downloadTimer = setInterval(function timeCount() {
      timeLeft -= 1;
      let minutes = Math.floor(timeLeft / 60);
      let seconds = timeLeft % 60;
      countdown.innerHTML = "倒计时剩余：<span>" + minutes + "分" + seconds + "秒</span>";

      if(timeLeft <= 0){
        clearInterval(downloadTimer);
        countdown.style.display = "none";
        finalText.style.display = "block";
      }
    }, 1000);
  });
</script>

自定义调整说明 #

• 修改按钮外观：调整<style>标签内.download-btn对应的CSS属性即可，比如背景色、字体大小、圆角等
• 修改按钮文字：直接修改<a href="#" class="download-btn">标签内的文字，不需要图标可删除<i class="fas fa-clock"></i>这段代码
• 修改倒计时时长：修改var timeLeft = 300;中的数值即可，单位为秒，300对应5分钟
• 修改倒计时提示文本：修改countdown.innerHTML后的文本内容即可
• 修改结束后显示内容：修改<div class="final-text">标签内的内容即可，支持插入任意HTML元素

WordPress使用方法 #

1. 打开需要添加按钮的文章/页面编辑器，点击添加区块按钮
2. 搜索并选择「自定义HTML」区块
3. 将上述完整代码粘贴到区块输入框中
4. 预览确认效果后，发布/更新文章即可生效

内容的提问来源于stack exchange，提问作者Anita