创建一个计时器 - 输入值不会倒计时答案

【问题标题】：Creating a timer - Input value won't count down创建一个计时器 - 输入值不会倒计时
【发布时间】：2023-01-10 19:10:33
【问题描述】：

我正在尝试创建一个倒数计时器，它在单击特定按钮时从用户定义的值开始倒计时。我可以创建一个在单独的元素中倒计时的计时器，但这不是我想要的。

我希望用户输入的值是计时器，并从那里倒计时到零。但是，我根本无法让用户输入的值进行倒计时。

<DOCTYPE html>
<html lang="en">
<head>
    <title>Timer App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <script src="index.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<h1 id="appTitle">TIMER</h1>

  <div id="appContainer">
    <div class="timeContainer">
        <input id="hours" type="number" value = "0"></input>
            <span>:</span>
        <input id="mins" type="number" value = "0"></input>
            <span>:</span>
        <input id="secs" type="number" value = "0"></input>
    </div>


    <div class="btnContainer">
        <button id="startBtn" onclick="startTimer()">Start</button>
    </div>
  </div>

</body>
</html>

var hoursInput = document.getElementById("hours")
var minsInput = document.getElementById("mins")
var secsInput = document.getElementById("secs")

var hours = hoursInput.InnerHTML = 0;
var minutes = minsInput.InnerHTML = 0;
var seconds = secsInput.InnerHTML = 0;

function startTimer() {
    hours = hoursInput.value;
    minutes = minutesInput.value;
    seconds = secondsInput.value;

    setInterval(function() {
        if (hours == 0 && minutes == 0 && seconds == 0) {
            clearInterval();
            hoursInput.innerHTML = " ";
            minsInput.innerHTML = "TIME OUT";
            secsInput.innerHTML = " ";
        } else if (seconds == 0) {
            if (minutes == 0) {
                hours--;
                minutes = 59;
                seconds = 59;
            } else {
                minutes--;
                seconds = 59;
            }
        } else {
            seconds--;
        }
    }, 1000);
}

【问题讨论】：

你永远不会为你的输入设置一个新的值，当你到达0:00:00时执行并且你不应该通过theinput.innerHTML = ...但是theinput.value = ...设置input的值
假设此脚本是 script.js 的一部分，它无论如何都不会工作，因为 hoursInput、minsInput 和 secsInput 将是未定义的，因为脚本是在呈现这些 HTML 元素之前执行的。将脚本放在 HTML 文件的末尾......

标签： javascript

【解决方案1】：

您永远不会在函数中返回值：（请注意，您可以使用 SO 在 sn-p 中运行代码，如下所示）

var hoursInput = document.getElementById("hours");
var minsInput = document.getElementById("mins");
var secsInput = document.getElementById("secs");

var hours = (hoursInput.value = 0);
var minutes = (minsInput.value = 0);
var seconds = (secsInput.value = 0);
var intervalId;

function startTimer() {
  hours = hoursInput.value;
  minutes = minsInput.value;
  seconds = secsInput.value;

  intervalId = setInterval(function () {
    if (hours == 0 && minutes == 0 && seconds == 0) {
      clearInterval(intervalId);
      hoursInput.value = " ";
      minsInput.value = "TIME OUT";
      secsInput.value = " ";
    } else if (seconds == 0) {
      if (minutes == 0) {
        hours--;
        minutes = 59;
        seconds = 59;
      } else {
        minutes--;
        seconds = 59;
      }
    } else {
      seconds--;
    }
    hoursInput.value = hours;
    minsInput.value = minutes;
    secsInput.value = seconds;
  }, 1000);
}

<DOCTYPE html>
  <html lang="en">

  <head>
    <title>Timer App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <script src="index.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
  </head>

  <body>
    <h1 id="appTitle">TIMER</h1>

    <div id="appContainer">
      <div class="timeContainer">
        <input id="hours" type="number" value="0"></input>
        <span>:</span>
        <input id="mins" type="number" value="0"></input>
        <span>:</span>
        <input id="secs" type="number" value="0"></input>
      </div>

      <div class="btnContainer">
        <button id="startBtn" onclick="startTimer()">Start</button>
      </div>
    </div>

  </body>

  </html>

【讨论】：

【解决方案2】：

var hoursInput = document.getElementById("hours")
var minsInput = document.getElementById("mins")
var secsInput = document.getElementById("secs")
var msg = document.getElementById("msg")


var hours = hoursInput.value = 0;
var minutes = minsInput.value = 0;
var seconds = secsInput.value = 0;

function startTimer() {
  hours = hoursInput.value;
  minutes = minsInput.value;
  seconds = secsInput.value;
  msg.innerHTML = ''

  setInterval(function() {
    if (hours == 0 && minutes == 0 && seconds == 0) {
      clearInterval();
      msg.innerHTML = 'Time Out'
    } else if (seconds == 0) {
      if (minutes == 0) {
        hours--;
        minutes = 59;
        seconds = 59;
        msg.innerHTML = hours + ':' + minutes + ':' + seconds
      } else {
        minutes--;
        seconds = 59;
        msg.innerHTML = hours + ':' + minutes + ':' + seconds

      }
    } else {
      seconds--;
      msg.innerHTML = hours + ':' + minutes + ':' + seconds
    }
  }, 1000);
}

<DOCTYPE html>
  <html lang="en">

  <head>
    <title>Timer App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <script src="index.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
  </head>

  <body>
    <h1 id="appTitle">TIMER</h1>

    <div id="appContainer">
      <div class="timeContainer">
        <input id="hours" type="number" min="0" max="23" value="0"></input>
        <span>:</span>
        <input id="mins" type="number" min="0" max="59" value="0"></input>
        <span>:</span>
        <input id="secs" type="number" min="0" max="59" value="0"></input>
      </div>
      <br>


      <div class="btnContainer">
        <button id="startBtn" onclick="startTimer()">Start</button>
      </div>
      <br>
      <p id='msg'>
        <p>
    </div>

  </body>

  </html>

【讨论】：