javascript 创建计时器-输入值不会倒计时

vatpfxk5 于 2023-01-11 发布在 Java

关注(0)|答案(3)|浏览(228)

我正在尝试创建一个倒计时计时器，当单击某个按钮时，它将从用户定义的值开始倒计时。我可以创建一个在单独元素中倒计时的计时器，但这不是我要找的。
我希望用户输入的值是计时器，并从那里倒计时到零。但是，我只是不能让用户输入的值倒计时。

<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);
}

JavaScript

来源：https://stackoverflow.com/questions/75067840/creating-a-timer-input-value-wont-count-down

3条答案

按热度按时间

cx6n0qe31#

我已将innerHTML更改为value，并且声明的变量名和使用的变量名不同，将其更正为minutesInput更改为minsInput，将secondsInput更改为secsInput
我还增加了一段显示倒计时和限制输入的数字

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>

赞(0）回复(0）举报 2023-01-11

6l7fqoea2#

调用该函数时，根本不会得到input标记的值。
你只打过一次电话，在页面加载的时候。
你应该把它们放在函数里面。
然后在计时器再次循环之前显示该值。
另外，我修正和简化了逻辑，因为我发现了一些缺陷。

function startTimer() {
    let hoursInput   = document.getElementById("hours")
    let minutesInput = document.getElementById("mins")
    let secondsInput = document.getElementById("secs")

    let hours   = hoursInput.value
    let minutes = minutesInput.value
    let seconds = secondsInput.value
    
    // I changed your logic here coz it has problems -> mins running instead of sec
    let timer = setInterval(function() {
        if (hours == 0 && minutes == 0 && seconds == 0) {
            console.log("TIME OUT");
            clearInterval(timer); // PUT THE setInterval INTO A VARIABLE SO YOU CAN USE clearInterval
        }
        else if (seconds - 1 < 0) {
            seconds = 59;
            minutes = hours == 0 && minutes == 0 ? 0 : (minutes - 1 < 0 ? 59 : minutes - 1)
            hours   = hours - 1 < 0 ? 0 : (minutes == 59 ? hours - 1 : hours)
        }
        else seconds--;
        
        // DISPLAY NEW VALUES
        hoursInput.value   = hours
        minutesInput.value = minutes
        secondsInput.value = seconds

    }, 1000); // 1000 == 1 second
}

赞(0）回复(0）举报 2023-01-11

rmbxnbpk3#

在函数中永远不要返回值：（注意，您可以使用SO在代码片段中运行代码，如下所示）

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>

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 创建计时器-输入值不会倒计时

3条答案

相关问题

热门标签

最新问答