HTML/JS - 加载时启动计时器

Question

一切都很好。目前，我不必按下按钮来启动计时器，它会在页面加载时自动启动。问题是启动、停止和重置按钮仍然出现。当我隐藏按钮代码时，计时器不工作。当页面加载时，不应出现按钮，计时器应该可以正常工作。

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>30 second countdown timer</title>
  </head>
  <body onload="startTimer();">
    <div id="countdown">
      <div id="countdown-number">30</div>
    </div>
    <div class="action-list">
      <button id="stop">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
      </button>
      <button id="start">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
      </button>
      <button id="reset">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
      </button>
    </div>
    <audio id="timeout_audio"></audio>
  </body>
</html>

<script>
  // Select Countdown container
const countContainer = document.getElementById("countdown-number");

// Select action buttons
const startButton = document.getElementById("start");
const stopButton = document.getElementById("stop");
const resetButton = document.getElementById("reset");

// Select timeout Audio element
const timeoutAudio = document.getElementById("timeout_audio");

// variable to store count
var remainingTime = 30;

// variable to store time interval
var timer;

// Variable to track whether timer is running or not
var isStopped = true;

// Function to start Timer
const startTimer = () => {
  if (isStopped) {
    isStopped = false;
    countContainer.innerHTML = remainingTime;
    timer = setInterval(renderTime, 1000);
  }
};

// Function to stop Timer
const stopTimer = () => {
  isStopped = true;
  if (timer) {
    clearInterval(timer);
  }
};

// Function to reset Timer
const resetTimer = () => {
  isStopped = true;
  clearInterval(timer);
  remainingTime = 30;
  countContainer.innerHTML = remainingTime;
};

// Initialize timeout sound
timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
timeoutAudio.load();

// Attach onclick event to buttons
startButton.onclick = startTimer;
resetButton.onclick = resetTimer;
stopButton.onclick = stopTimer;

// function to display time
const renderTime = () => {
  // decement time
  remainingTime -= 1;
  // render count on the screen
  countContainer.innerHTML = remainingTime;
  // timeout on zero
  if (remainingTime === 0) {
    isStopped = true;
    clearInterval(timer);
    // Play audio on timeout
    timeoutAudio.play();
    remainingTime = 30;
  }
};
</script>
<style>
  body {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("https://img4.goodfon.com/wallpaper/nbig/1/2e/multfilm-shou-simpsons-personazh-20th-century-fox-art-ris-15.jpg");
}
#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0e2c4c;
  font-size: 70px;
  width: 200px;
  height: 200px;
  background-color: #e7d9fc;
  border-radius: 50%;
}
.action-list {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}
button {
  border: none;
  background-color: #e7d9fc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
</style>

Answer 1

onload 不起作用，因为您的脚本在 html 文档加载后加载。表示当 onload 调用时 startTimer() 此函数尚未创建。

自动启动计数器的最佳方式是保持加载状态。并在脚本末尾调用 startTimer();（最后一行）：

<!DOCTYPE html>
<html>

<head>
  <title>30 second countdown timer</title>
  <style>
    body {
      font-family: sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url("https://img4.goodfon.com/wallpaper/nbig/1/2e/multfilm-shou-simpsons-personazh-20th-century-fox-art-ris-15.jpg");
    }

    #countdown {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #0e2c4c;
      font-size: 70px;
      width: 200px;
      height: 200px;
      background-color: #e7d9fc;
      border-radius: 50%;
    }

    .action-list {
      display: flex;
      gap: 30px;
      margin-top: 30px;
    }

    button {
      border: none;
      background-color: #e7d9fc;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      cursor: pointer;
    }
  </style>

</head>

<body>
  <div id="countdown">
    <div id="countdown-number">30</div>
  </div>
  <div class="action-list">
    <button id="stop">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
    </button>
    <button id="start">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
    </button>
    <button id="reset">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
    </button>
  </div>
  <audio id="timeout_audio"></audio>

  <script>



       const countContainer = document.getElementById("countdown-number");

      // Select action buttons
      const startButton = document.getElementById("start");
      const stopButton = document.getElementById("stop");
      const resetButton = document.getElementById("reset");

      // Select timeout Audio element
      const timeoutAudio = document.getElementById("timeout_audio");

      // variable to store count
      var remainingTime = 30;

      // variable to store time interval
      var timer;

      // Variable to track whether timer is running or not
      var isStopped = true;

      // Function to start Timer
      const startTimer = () => {
        if (isStopped) {
          isStopped = false;
          countContainer.innerHTML = remainingTime;
          timer = setInterval(renderTime, 1000);
        }
      };

      // Function to stop Timer
      const stopTimer = () => {
        isStopped = true;
        if (timer) {
          clearInterval(timer);
        }
      };

      // Function to reset Timer
      const resetTimer = () => {
        isStopped = true;
        clearInterval(timer);
        remainingTime = 30;
        countContainer.innerHTML = remainingTime;
      };

      // Initialize timeout sound
      timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
      timeoutAudio.load();

      // Attach onclick event to buttons
      startButton.onclick = startTimer;
      resetButton.onclick = resetTimer;
      stopButton.onclick = stopTimer;

      // function to display time
      const renderTime = () => {
        // decement time
        remainingTime -= 1;
        // render count on the screen
        countContainer.innerHTML = remainingTime;
        // timeout on zero
        if (remainingTime === 0) {
          isStopped = true;
          clearInterval(timer);
          // Play audio on timeout
          timeoutAudio.play();
          remainingTime = 30;
        }
      };

      startTimer();
 


  </script>

</body>

</html>

Answer 2

所以，基本上您希望在页面加载时不显示按钮，并且计时器应该正常工作。所以，你可以做的是，将div作为按钮，并在定时器开始运行时将其dispaly设置为none，当定时器达到0，再次将 display 设置为 block。

在你的脚本中写下这个

var x = document.getElementsByClassName('action-list')[0];

并在您的 startTimer 函数中，将 display 设置为 none

const startTimer = () => {
  x.style.display = "none";
  // your code for startTimer
};

在你的renderTime()函数中，当时间到达0时，你可以将display设置为block

const renderTime = () => {
  remainingTime -= 1;
  countContainer.innerHTML = remainingTime;
  // timeout on zero
  if (remainingTime === 0) {
    isStopped = true;
    clearInterval(timer);
    // set the display to block, so that the buttons appear again
    x.style.display = "block";
    // Play audio on timeout
    timeoutAudio.play();
    remainingTime = 30;
  }
};

Answer 3

试试这个：这将不会在加载后显示按钮并突出显示上次按下的按钮，默认情况下突出显示播放按钮。

<!DOCTYPE html>
<html>

<head>
  <title>30 second countdown timer</title>
  <style>
    body {
      font-family: sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url("https://img4.goodfon.com/wallpaper/nbig/1/2e/multfilm-shou-simpsons-personazh-20th-century-fox-art-ris-15.jpg");
    }

    #countdown {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #0e2c4c;
      font-size: 70px;
      width: 200px;
      height: 200px;
      background-color: #e7d9fc;
      border-radius: 50%;
    }

    .action-list {
      display: flex;
      gap: 30px;
      margin-top: 30px;
    }

    button {
      border: none;
      background-color: #e7d9fc;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      cursor: pointer;
    }
  </style>

</head>

<body>
  <div id="countdown">
    <div id="countdown-number">30</div>
  </div>
  <div class="action-list">
    <button id="stop">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
    </button>
    <button id="start">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
    </button>
    <button id="reset">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
    </button>
  </div>
  <audio id="timeout_audio"></audio>

  <script>

       var x = document.getElementsByClassName('action-list')[0];

       const countContainer = document.getElementById("countdown-number");

      // Select action buttons
      const startButton = document.getElementById("start");
      const stopButton = document.getElementById("stop");
      const resetButton = document.getElementById("reset");

      // Select timeout Audio element
      const timeoutAudio = document.getElementById("timeout_audio");

      // variable to store count
      var remainingTime = 30;

      // variable to store time interval
      var timer;

      // Variable to track whether timer is running or not
      var isStopped = true;

      // Function to start Timer
      const startTimer = () => {

        startButton.style.background = "green";  
        stopButton.style.background = "#e7d9fc"
        x.style.display = "none";
        if (isStopped) {
          isStopped = false;
          countContainer.innerHTML = remainingTime;
          timer = setInterval(renderTime, 1000);
        }
      };

      // Function to stop Timer
      const stopTimer = () => {
        startButton.style.background = "#e7d9fc";  
        stopButton.style.background = "green"
        isStopped = true;
        if (timer) {
          clearInterval(timer);
        }
      };

      // Function to reset Timer
      const resetTimer = () => {
        isStopped = true;
        clearInterval(timer);
        remainingTime = 30;
        countContainer.innerHTML = remainingTime;
      };

      // Initialize timeout sound
      timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
      timeoutAudio.load();

      // Attach onclick event to buttons
      startButton.onclick = startTimer;
      resetButton.onclick = resetTimer;
      stopButton.onclick = stopTimer;

      // function to display time
      const renderTime = () => {
        // decement time
        remainingTime -= 1;
        // render count on the screen
        countContainer.innerHTML = remainingTime;
        // timeout on zero
        if (remainingTime === 0) {
          isStopped = true;
          clearInterval(timer);
          x.style.display = "block";
          // Play audio on timeout
          timeoutAudio.play();
          remainingTime = 30;
        }
      };

      startTimer();
 


  </script>

</body>

</html>

HTML/JS - 加载时启动计时器

HTML/JS - Start timer on load

javascript

html

timer