求助：AMP for Email中无法使用amp-date-countdown，求倒计时实现方案

方案1：使用amp-script结合原生JavaScript实现实时倒计时 #

AMP for Email支持amp-script组件（需遵循沙箱限制），可以通过内联JS计算并更新倒计时内容，这是目前最接近实时效果的方案。以下是完整可验证的示例：

<!DOCTYPE html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  <div id="countdown-display" style="font-size: 24px; font-weight: bold;">
    00天00时00分00秒
  </div>

  <amp-script layout="container" script="countdown-script">
    <script type="text/plain" target="amp-script" id="countdown-script">
      // 设置目标截止时间（建议使用UTC时间避免时区问题）
      const targetDate = new Date('2024-12-31T23:59:59Z').getTime();
      const displayElement = document.getElementById('countdown-display');

      function updateCountdown() {
        const now = new Date().getTime();
        const timeRemaining = targetDate - now;

        if (timeRemaining <= 0) {
          displayElement.textContent = "倒计时已结束";
          clearInterval(interval);
          return;
        }

        // 计算天、时、分、秒
        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

        // 格式化数字为两位
        const formatNum = num => num.toString().padStart(2, '0');
        displayElement.textContent = `${formatNum(days)}天${formatNum(hours)}时${formatNum(minutes)}分${formatNum(seconds)}秒`;
      }

      // 初始更新+每秒刷新
      updateCountdown();
      const interval = setInterval(updateCountdown, 1000);
    </script>
  </amp-script>
</body>
</html>

关键注意事项： #

• amp-script的脚本必须内联在<script type="text/plain" target="amp-script">标签中，不能引用外部脚本文件
• 目标时间建议使用UTC格式（末尾加Z），避免不同时区用户看到的倒计时不一致
• 倒计时结束后记得清除定时器，避免不必要的性能消耗

方案2：伪实时预渲染+客户端校准（适合低实时性场景） #

如果对实时性要求不高，可以在邮件发送时由后端预渲染初始倒计时状态，再通过简单JS在客户端打开时校准时间差，实现成本更低：

<!DOCTYPE html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    .countdown-item { display: inline-block; margin: 0 8px; }
  </style>
</head>
<body>
  <!-- 发送邮件时由后端动态生成的初始倒计时值 -->
  <div class="countdown">
    <span class="countdown-item" id="days">10</span>天
    <span class="countdown-item" id="hours">05</span>时
    <span class="countdown-item" id="minutes">30</span>分
    <span class="countdown-item" id="seconds">15</span>秒
  </div>

  <script type="text/javascript">
    // 以下两个时间戳需在邮件发送时由后端动态生成
    const targetTimestamp = 1735708799000; // 目标截止时间戳（UTC）
    const sendTimestamp = 1734680384000; // 邮件发送时的时间戳（UTC）

    function calibrateCountdown() {
      const now = new Date().getTime();
      const elapsed = now - sendTimestamp;
      let remaining = targetTimestamp - sendTimestamp - elapsed;

      if (remaining <= 0) {
        document.querySelector('.countdown').textContent = "倒计时已结束";
        return;
      }

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

      document.getElementById('days').textContent = days.toString().padStart(2, '0');
      document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
      document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
      document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    }

    calibrateCountdown();
    setInterval(calibrateCountdown, 1000);
  </script>
</body>
</html>

关键注意事项： #

• 后端需在发送邮件时动态计算并注入targetTimestamp和sendTimestamp
• 此方案依赖客户端系统时间的准确性，存在少量误差，但实现简单且兼容性好

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