时间戳

首页 > 解决方案 > 我用 JavaScript 创建了一个日期计算器，但即使 setInterval() 也无法更新数字

javascript - 我用 JavaScript 创建了一个日期计算器，但即使 setInterval() 也无法更新数字

问题描述

const clock = document.querySelector('.js-clock');
const text = clock.querySelector("p");

function getTime() {
  const xmasDay = new Date("2021-12-24:00:00:00+0900");
  const now = new Date();
  const gap = xmasDay - now;
  const day = Math.ceil(gap / (1000 * 60 * 60 * 24));
  const hour = Math.ceil((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const min = Math.ceil((gap % (1000 * 60 * 60)) / (1000 * 60));
  const sec = Math.ceil((gap % (1000 * 60)) / 1000);
  text.innerText = `${day}d ${hour < 10 ? `0${hour}` : hour}h ${
    min < 10 ? `0${min}` : min
  }m ${sec < 10 ? `0${sec}` : sec}s`;
}
function init() {
  getTime();  
  setInterval(getTime(),1000);
}
init();
<body>
    <h1>Time until chrismas</h1>
    <div class="js-clock">
    <p></p>
    </div>
    <script src="1.js"></script>
  </body>

我不会说英语，所以我使用翻译提问。日期和时间没有更新 代码语句有误吗？我希望我能得到一些帮助。

标签： javascript

解决方案

通过将括号附加到 getTime 调用 in setInterval，您正在调用该函数并将间隔的回调设置为其返回值，而不是函数本身。

const clock = document.querySelector('.js-clock');
const text = clock.querySelector("p");

function getTime() {
  const xmasDay = new Date("2021-12-24:00:00:00+0900");
  const now = new Date();
  const gap = xmasDay - now;
  const day = Math.ceil(gap / (1000 * 60 * 60 * 24));
  const hour = Math.ceil((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const min = Math.ceil((gap % (1000 * 60 * 60)) / (1000 * 60));
  const sec = Math.ceil((gap % (1000 * 60)) / 1000);
  text.innerText = `${day}d ${hour < 10 ? `0${hour}` : hour}h ${
    min < 10 ? `0${min}` : min
  }m ${sec < 10 ? `0${sec}` : sec}s`;
}

function init() {
  getTime();
  setInterval(getTime, 1000);
}
init();
<body>
  <h1>Time until chrismas</h1>
  <div class="js-clock">
    <p></p>
  </div>
  <script src="1.js"></script>
</body>

删除括号，以便您传递setInterval对函数的引用，而不是其返回值。

推荐阅读