Question

我有一个项目需要做倒数计时器，但是无法使用任何功能。我知道可以使用setInterval完成此操作，但是，我发现的大多数文档都显示了一个结合使用的函数。 W3schools有一个很好的例子，但是它使用了一个函数。我知道

我已经写了一些代码，并且能够显示分钟和秒，但是，实际上并不能倒数。没有功能，有没有办法做到这一点？

const timeSpan = document.getElementById('timer');

// Get Time Now
var timeMinutes = 10;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeMinutes * 60 * 1000);
var distance = deadline - currentTime;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

timeSpan.innerHTML = minutes + 's' + seconds;

这显示分钟和秒，但是没有setInterval或setTimeOut，它不会像普通的倒数计时器一样倒数。对于项目，它需要从十分钟开始倒数，最后提醒用户已过期，他们将需要刷新页面。

Answer 1

在每个间隔重置计时器时，您需要将某些功能移出该功能。您也应该避免将时间存储为Date对象，因为您只需要时间戳。

const timeSpan = document.getElementById('timer');

const mins = 10;
const now = new Date().getTime();
const deadline = mins * 60 * 1000 + now;


setInterval(() => {
  var currentTime = new Date().getTime();
  var distance = deadline - currentTime;
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  timeSpan.innerHTML = minutes + 's' + seconds;
}, 500)

<span id=timer></span>

Answer 2

此处是不带 word function的版本：

const timeSpan = document.getElementById('timer');
var timeMinutes = 10;
var deadline = new Date(new Date().getTime() + timeMinutes * 60 * 1000);

setInterval(()=>{
    var currentTime = new Date();
    var distance = deadline - currentTime;
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    timeSpan.innerHTML = minutes + 's' + seconds;
},500)

那是你所追求的吗？

不使用函数的Vanilla Javascript中的倒数计时器

2 个答案: