如何设置显示巴西利亚时间当日剩余时长的计时器？现有代码可行吗？

你的现有代码无法直接实现需求，问题出在这几点：

• 代码里的display.getHours()完全错误，display是DOM元素对象，没有这个方法；
• 当前逻辑是固定时长（29.5分钟）的循环倒计时，和“当日剩余时间”的动态计算逻辑不匹配。

下面是修改后的完整代码，保留了你原来的Shopify标签判断逻辑，同时实现了巴西利亚时区的当日剩余时间计算：

{% assign productTags = product.tags %}  
{% if productTags contains 'contador' %}
<script>
  function updateRemainingTime(display) {
    // 获取巴西利亚时区的当前时间
    const brtNow = new Date(new Date().toLocaleString('en-US', {timeZone: 'America/Sao_Paulo'}));
    // 构造巴西利亚当日的23:59:59
    const brtEndOfDay = new Date(brtNow);
    brtEndOfDay.setHours(23, 59, 59, 999);

    // 计算剩余毫秒数
    let remainingMs = brtEndOfDay.getTime() - brtNow.getTime();
    // 若已过当日，剩余时间设为0
    if (remainingMs < 0) remainingMs = 0;

    // 转换为小时、分钟、秒
    const hours = Math.floor(remainingMs / (1000 * 60 * 60));
    remainingMs %= (1000 * 60 * 60);
    const minutes = Math.floor(remainingMs / (1000 * 60));
    remainingMs %= (1000 * 60);
    const seconds = Math.floor(remainingMs / 1000);

    // 格式化数字，补前导0
    const formattedHours = hours < 10 ? `0${hours}` : hours;
    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
    const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;

    // 更新显示内容
    display.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;

    // 如果剩余时间为0，停止计时器
    if (remainingMs <= 0) {
      clearInterval(timerInterval);
    }
  }

  window.onload = function () {
    const display = document.querySelector('#time');
    // 立即执行一次，避免页面加载后延迟显示
    updateRemainingTime(display);
    // 每秒更新一次
    const timerInterval = setInterval(() => updateRemainingTime(display), 1000);
  };
</script>
{% endif %}

关键修改说明 #

• 去掉了固定时长的duration参数，改为实时计算巴西利亚时区的当日剩余时间，确保时间准确；
• 使用timeZone: 'America/Sao_Paulo'来获取巴西利亚时区的时间，自动处理夏令时切换；
• 修复了display.getHours()的错误，改为直接更新DOM元素的文本内容；
• 增加了剩余时间为0时停止计时器的逻辑，避免无效循环。

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