时间倒数计时器_如何建立倒数计时器

时间倒数计时器

Building a simple countdown timer is easy with JavaScript's native timing events. You can read more about those in this article.

利用JavaScript的本机计时事件，构建一个简单的倒数计时器很容易。 您可以在本文中阅读有关这些内容的更多信息。

建立倒数计时器 (Building the countdown timer)

Start by declaring an empty function called startCountdown that takes seconds as an argument:

首先声明一个空函数startCountdown ，该函数以seconds为参数：

function startCountdown(seconds) {
    
};

We want to keep track of the seconds that pass once the timer is started, so use let to declare a variable called counter and set it equal to seconds:

我们希望跟踪计时器启动后经过的秒数，因此请使用let声明一个名为counter的变量并将其设置为seconds ：

function startCountdown(seconds) {
  let counter = seconds;
}

Remember that it's best practice to save your timing event function to a variable. This makes it much easier to stop the timer later. Create a variable called interval and set it equal to setInterval():

请记住，最佳做法是将计时事件功能保存到变量中。 这使得以后停止计时器更加容易。 创建一个名为interval的变量并将其设置为等于setInterval() ：

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval();
}

You can pass a function directly to setInterval, so let's pass it an empty arrow function as the first argument. Also, we want the function to run every second, so pass 1000 as the second argument:

您可以将一个函数直接传递给setInterval ，因此让我们将一个空箭头函数作为第一个参数传递给它。 另外，我们希望函数每秒运行一次，因此将1000作为第二个参数传递：

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    
  }, 1000);
}

Now the function we passed to setInterval will run every second. Every time it runs, we want to log the current value of counter to the console before deincrementing it:

现在，我们传递给setInterval的函数将每秒运行一次。 每次运行时，我们都希望将counter的当前值记录在控制台上，然后再递增：

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
  }, 1000);
}

Now if you run the function, you'll see that it works, but doesn't stop once counter is less than 0:

现在，如果您运行该函数，您会看到它可以正常工作，但是一旦counter小于0，它就不会停止：

startCountdown(5);

// Console Output // 
// 5
// 4
// 3
// 2
// 1
// 0 
// -1
// -2

To fix this, first write an if statement that executes when counter is less than 0:

要解决此问题，请首先编写一个if语句，该语句在counter小于0时执行：

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
      
    if (counter < 0 ) {
      
    }
  }, 1000);
}

Then inside the if statement, clear the interval with clearInterval and log an alarm sound string to the console:

然后在if语句中，使用clearInterval清除interval并将警报声音字符串记录到控制台：

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
      
    if (counter < 0 ) {
      clearInterval(interval);
      console.log('Ding!');
    }
  }, 1000);
}

执行 (Execution)

Now when you start the timer, you should see the following:

现在，当启动计时器时，您应该看到以下内容：

startCountdown(5);

// Console Output // 
// 5
// 4
// 3
// 2
// 1
// 0 
// Ding!

更多资源 (More Resources)

JavaScript Timing Events: setTimeout and setInterval

JavaScript时间事件：setTimeout和setInterval

翻译自: https://www.freecodecamp.org/news/how-to-create-a-countdown-timer/

时间倒数计时器