带有进度条的 JavaScript 倒数计时器答案

【问题标题】：JavaScript Countdown timer with progress bar带有进度条的 JavaScript 倒数计时器
【发布时间】：2020-12-05 19:32:45
【问题描述】：

我正在使用 JavaScript 倒数计时器创建网页，用户可以在其中输入以分钟为单位的时间并启动计时器。我有两个问题。

首先，如果不刷新页面，计数器将无法启动。
我想在输入新的分钟值并重新按下开始按钮时重置倒计时。目前两个不同的值混合在一起（函数将在不刷新的情况下启动） - 进度条将向后跳到第四个。

          var startingMinutes = parseInt(document.getElementById("time").value);
          let time = startingMinutes * 60;
          console.log(startingMinutes);
          console.log(time);
    
          function move() {
            console.log(time);
            var elem = document.getElementById("myBar");
            elem.style.width = 1 + "%";
            elem.innerHTML = 1 + "%";
    
            var setTime = document.getElementById("time").value;
            var timeVar = 620 * setTime;
    
            if (setTime > 0) {
              setInterval(updateCountdown, 1000);
    
              i = 1;
              var width = 1;
              var id = setInterval(frame, timeVar);
              function frame() {
                if (width >= 100) {
                  clearInterval(id);
                  i = 0;
                } else {
                  width++;
                  elem.style.width = width + "%";
                  elem.innerHTML = width + "%";
                }
              }
            }
          }
    
          const countdownEl = document.getElementById("clock");
    
          /* function for numeric counter */
          function updateCountdown() {
    
            console.log(time);
    
            const minutes = Math.floor(time / 60);
            let seconds = time % 60;
    
            seconds = seconds < 10 ? "0" + seconds : seconds;
    
            countdownEl.innerHTML = `${minutes}:${seconds}`;
    
            if (minutes == 0 && seconds == 0) {
              return;
            }
    
            time--;
          }

          * {
            color: rgb(245, 242, 237);
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            box-shadow: 7px 7px 5px #3c3eb3;
            background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
          }
    
          #myProgress {
            width: 100%;
            background-color: #ddd;
          }
    
          #myBar {
            width: 1%;
            height: 30px;
            background-color: #4caf50;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 800;
            text-align: center;
            line-height: 30px;
            background-image: radial-gradient(
              rgb(255, 244, 92),
              rgb(247, 247, 54),
              rgb(85, 79, 23)
            );
            color: rgb(44, 38, 29);
          }
    
          button {
            font-size: 3vw;
            color: rgb(245, 242, 237);
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
          }
    
          .form {
            font-size: 22px;
          }
    
          #clock {
            font-size: 6vw;
            font-weight: 600;
            color: rgb(245, 242, 237);
            margin: auto;
            border-radius: 100%;
            background: #4caf50;
            background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
            width: 260px;
            height: 260px;
            display: grid;
            place-items: center;
          }

        <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
   
      </head>
      <body>
        
        <br />
        <br />
        <p id="clock" class="shadow">TIME</p>
    
        <h1 class="shadow">JavaScript Countdown Timer</h1>
    
        <form action="" id="form" class="shadow">
          <label for="" class="form">Minutes:</label>
          <input
            type="number"
            id="time"
            value="0"
            class="form"
          />
          <br />
          
          <div id="myProgress">
            <div id="myBar" class="shadow">1%</div>
          </div>
          <br />
          
          <button onclick="move()" type="button" class="shadow">Start</button>
          <br />
          <br />
        </form>
        <br />
    
      </body>
    </html>

【问题讨论】：

你目前有什么代码？
这能回答你的问题吗？ How to use setInterval and clearInterval?
你到底在哪里卡住了？请提供一个最低限度可重现的示例。
当我在浏览器上打开页面时，在文本输入中添加数值并按下开始。然后只有进度条开始移动。但不是 TIME 字段上的数字。
数字倒计时仅在页面刷新和第二个按钮单击后开始。

标签： javascript timer countdown clock

【解决方案1】：

一切正常！

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        color: rgb(245, 242, 237);
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        box-shadow: 7px 7px 5px #3c3eb3;
        background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
      }

      #myProgress {
        width: 100%;
        background-color: #ddd;
      }

      #myBar {
        width: 1%;
        height: 30px;
        background-color: #4caf50;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        line-height: 30px;
        background-image: radial-gradient(
          rgb(255, 244, 92),
          rgb(247, 247, 54),
          rgb(85, 79, 23)
        );
        color: rgb(44, 38, 29);
      }

      button {
        font-size: 3vw;
        color: rgb(245, 242, 237);
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
      }

      .form {
        font-size: 22px;
      }

      #clock {
        font-size: 6vw;
        font-weight: 600;
        color: rgb(245, 242, 237);
        margin: auto;
        border-radius: 100%;
        background: #4caf50;
        background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
        width: 260px;
        height: 260px;
        display: grid;
        place-items: center;
      }
    </style>
  </head>
  <body>
    
    
    <form action="" id="form" class="shadow">
      <br />
      <br />
      <p id="clock" class="shadow">TIME</p>
  
      <h1 class="shadow">JavaScript Countdown Timer</h1>
      <label for="" class="form">Minutes:</label>
      <input
        type="number"
        id="timeField"
        value="0"
        class="form"
      />
      <br />
      <br />
      <div id="myProgress">
        <div id="myBar" class="shadow">1%</div>
      </div>
      <br />
      
      <button id="startButton" onclick="move()" type="button" class="shadow">Start</button>
      <button id="refreshButton" onclick="refresh()" type="button" class="shadow" hidden>Reset</button>
      <br />
      <br />
      <br />
      <br />
    </form>
    <br />



    <script>
      var startingMinutes;
      var time;

      function refresh(){
        location.reload(); 
        document.getElementById("startButton").hidden = false;
        document.getElementById("refreshButton").hidden = true;
      }

      function move() {

        document.getElementById("startButton").hidden = true;
        document.getElementById("refreshButton").hidden = false;

      startingMinutes = parseInt(document.getElementById("timeField").value);
      time = startingMinutes * 60;

        console.log(time);
        var elem = document.getElementById("myBar");
        elem.style.width = 1 + "%";
        elem.innerHTML = 1 + "%";

        var setTime = document.getElementById("timeField").value;
        var timeVar = 620 * setTime;

        if (setTime > 0) {
          setInterval(updateCountdown, 1000);

          i = 1;
          var width = 1;
          var id = setInterval(frame, timeVar);
          function frame() {
            if (width >= 100) {
              clearInterval(id);
              i = 0;
            } else {
              width++;
              elem.style.width = width + "%";
              elem.innerHTML = width + "%";
            }
          }
        }
      }

      const countdownEl = document.getElementById("clock");

      /* function for numeric counter */
      function updateCountdown() {

        console.log(time);

        const minutes = Math.floor(time / 60);
        let seconds = time % 60;

        seconds = seconds < 10 ? "0" + seconds : seconds;

        countdownEl.innerHTML = `${minutes}:${seconds}`;

        if (minutes == 0 && seconds == 0) {
          return;
        }

        time--;
      }
    </script>
  </body>
</html>

【讨论】：

哎呀，比我早 3 秒 :(

【解决方案2】：

Ciao，好的，我解决了你的问题。你的代码在这里修改：

<style>
  * {
    color: rgb(245, 242, 237);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 7px 7px 5px #3c3eb3;
    background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
  }

  #myProgress {
    width: 100%;
    background-color: #ddd;
  }

  #myBar {
    width: 1%;
    height: 30px;
    background-color: #4caf50;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    text-align: center;
    line-height: 30px;
    background-image: radial-gradient(
      rgb(255, 244, 92),
      rgb(247, 247, 54),
      rgb(85, 79, 23)
    );
    color: rgb(44, 38, 29);
  }

  button {
    font-size: 3vw;
    color: rgb(245, 242, 237);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
  }

  .form {
    font-size: 22px;
  }

  #clock {
    font-size: 6vw;
    font-weight: 600;
    color: rgb(245, 242, 237);
    margin: auto;
    border-radius: 100%;
    background: #4caf50;
    background-image: radial-gradient(rgb(87, 87, 230), rgb(33, 36, 20));
    width: 260px;
    height: 260px;
    display: grid;
    place-items: center;
  }
</style>

<br />
<br />
<p id="clock" class="shadow">TIME</p>

<h1 class="shadow">JavaScript Countdown Timer</h1>

<form action="" id="form" class="shadow">
  <label for="" class="form">Minutes:</label>
  <input
    type="number"
    id="time"
    placeholder="Sisesta minutid"
    value="0"
    class="form"
  />
  <br />

  <div id="myProgress">
    <div id="myBar" class="shadow">1%</div>
  </div>
  <br />

  <button id="myButton" onclick="move()" type="button" class="shadow">Start</button>
  <br />
  <br />
</form>
<br />

<script>
  let time = 0;
  
  function move() {  
    var startingMinutes = parseInt(document.getElementById("time").value);
    time = startingMinutes * 60;
    //console.log(startingMinutes);
    //console.log(time);
    if (time > 0) document.getElementById("myButton").disabled = true;
    var elem = document.getElementById("myBar");
    elem.style.width = 1 + "%";
    elem.innerHTML = 1 + "%";

    var setTime = parseInt(document.getElementById("time").value);
    var timeVar = 620 * setTime;

    if (setTime > 0) {
      var up = setInterval(updateCountdown, 1000);

      i = 1;
      var width = 1;
      var id = setInterval(frame, timeVar);
      function frame() {
        if (width >= 100) {
          clearInterval(id);
          clearInterval(up);
          i = 0;
          document.getElementById("myButton").disabled = false;
        } else {
          width++;
          elem.style.width = width + "%";
          elem.innerHTML = width + "%";
        }
      }
    }
  }

  const countdownEl = document.getElementById("clock");

  /* function for numeric counter */
  function updateCountdown() {
    console.log(time);

    const minutes = Math.floor(time / 60);
    let seconds = time % 60;

    seconds = seconds < 10 ? "0" + seconds : seconds;

    countdownEl.innerHTML = `${minutes}:${seconds}`;

    if (minutes == 0 && seconds == 0) {
      return;
    }

    time--;
  }
</script>

所以我发现了 3 个问题：

startingMinutes and time问题：

var startingMinutes = parseInt(document.getElementById("time").value);
time = startingMinutes * 60;

这段代码必须在move funciotn 内，否则time 总是为0，并且不能在元素p 上显示dountdown（id 为clock）；

setInterval(updateCountdown, 1000) 问题：你忘了清除这个间隔。我添加了这个：

if (setTime > 0) {
   var up = setInterval(updateCountdown, 1000);

   i = 1;
   var width = 1;
   var id = setInterval(frame, timeVar);
   function frame() {
     if (width >= 100) {
       clearInterval(id);
       clearInterval(up);
   ...

'按钮'重新点击问题：一旦开始倒计时，也许你想避免按钮开始可能被再次点击（这实际上不是问题，是一个建议）。所以我在倒计时的所有时间都禁用了按钮启动。在函数move：
```
...
if (time > 0) document.getElementById("myButton").disabled = true;
...
```

然后在函数frame:

if (width >= 100) {
   ...
   document.getElementById("myButton").disabled = false;
   ...

现在应该可以了。

【讨论】：