带进度条的JavaScript倒数计时器

问题描述

我正在使用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,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,237);
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background-image: radial-gradient(rgb(87,20));
          }
    
          .form {
            font-size: 22px;
          }
    
          #clock {
            font-size: 6vw;
            font-weight: 600;
            color: rgb(245,237);
            margin: auto;
            border-radius: 100%;
            background: #4caf50;
            background-image: radial-gradient(rgb(87,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>

解决方法

我一切正常！

    <!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,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,237);
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background-image: radial-gradient(rgb(87,20));
      }

      .form {
        font-size: 22px;
      }

      #clock {
        font-size: 6vw;
        font-weight: 600;
        color: rgb(245,237);
        margin: auto;
        border-radius: 100%;
        background: #4caf50;
        background-image: radial-gradient(rgb(87,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>

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

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

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

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

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

  .form {
    font-size: 22px;
  }

  #clock {
    font-size: 6vw;
    font-weight: 600;
    color: rgb(245,237);
    margin: auto;
    border-radius: 100%;
    background: #4caf50;
    background-image: radial-gradient(rgb(87,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函数内部的圆顶，否则time总是为0，并且无法在元素p（标识为clock）上显示dountdown；

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;
   ...

现在应该可以工作了。

clock countdown javascript timer timer