香草 Javascript 中的倒数计时器，无需使用函数

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，它不会像普通倒计时器那样倒计时。对于该项目，它需要从 10 分钟开始倒计时，并在结束时提醒用户已过期，他们需要刷新页面。

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

<script>    
var timer   = (mins) => {
                        
    const timeSpan  = document.getElementById('timer');
    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 + ' min. ' + seconds + ' s.';
        
        if (minutes <=0 && seconds <=0) {
                alert('Time is over');
                return false;
        }

    }, 1000);   
 }
 
 timer(10);

</script>
<span id="timer"></span>

香草 Javascript 中的倒数计时器，无需使用函数

Countdown Timer in Vanilla Javascript without using a function

javascript

countdown