时间戳

首页 > 解决方案 > 如何实现在给定持续时间JS中计数的计数器？

javascript - 如何实现在给定持续时间JS中计数的计数器？

问题描述

我想实现一个在给定持续时间内计数的计数器。如果我想在一秒钟内数 100，那么每个计数之间的间隔应该是 10 毫秒，因此当它被计数为 100 时，它变成了 1 秒。对于 1000，每个计数之间的间隔应为 1 毫秒。

我尝试使用 setInterval 并根据我要计数的数字动态更改计数器的延迟，但是 setInterval 存在问题，它没有按预期工作。除了使用 setInterval 之外，我如何在 JavaScript 中实现这个计数器。先感谢您。

const btn = document.querySelector('button');
const counter1 = document.querySelector('.counter1');
const counter2 = document.querySelector('.counter2');

btn.addEventListener('click', ()=> {
    increment(100, counter1);
  increment(1000, counter2);
})

const increment = (n, counter) => {
  let m = 0;
  let time = 1000 / n;
  setInterval(() => {
    if (m < n) {
      m += 1;
      counter.textContent = m;
    } else clearInterval(this);
  }, time);
  
};
.counter-container {
 display: flex;
}

.counter {
  margin: 10px;
  text-align: center;
}
button {
  margin-left: 80px;
};
<div class="counter-container">
<div class="counter">
  <h3>Counter1</h3>
  <p class="counter1">100</p>
</div>
<div class="counter">
  <h3>Counter2</h3>
  <p class="counter2">1000</p>
</div>
</div>

<button>start</button>

标签： javascriptcountersetinterval

解决方案

setInterval()并且setTimeout()在时间方面实际上并不可靠。我将使用这些与 javascript 的组合Date.now()，它返回自浏览器/操作系统时代以来的毫秒数。所以你可以做这样的事情：w

const btn = document.querySelector('button');
const counter1 = document.querySelector('.counter1');
const counter2 = document.querySelector('.counter2');

btn.addEventListener('click', ()=> {
    increment(100, counter1);
  increment(1000, counter2);
})

const increment = (n, counter, length=1000) => {
  let start = Date.now()
  let end = start + length
  let interval = length / n;
  setInterval(() => {
    time = Date.now()
    if (time < end) {
      count = (time - start) / interval
      counter.textContent = count;
    } else {
      counter.textContent = n;
      clearInterval(this)
    };
  }, interval/2);
  
};
.counter-container {
 display: flex;
}

.counter {
  margin: 10px;
  text-align: center;
}
button {
  margin-left: 80px;
};
<div class="counter-container">
<div class="counter">
  <h3>Counter1</h3>
  <p class="counter1">100</p>
</div>
<div class="counter">
  <h3>Counter2</h3>
  <p class="counter2">1000</p>
</div>
</div>

<button>start</button>

推荐阅读