javascript 计时器无法正确处理秒数

dfty9e19 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(170)

每当我改变计时器上的分钟时它都能完美地工作，但是当我改变计时器上的秒数时，无论如何，它都会立即停止。我不知道我做错了什么。这个程序是codepen练习的一部分。当我把计时器设置为倒计时时，它工作得很完美，但当我把它改为倒计时时，它就停止工作了几秒钟。

window.addEventListener('DOMContentLoaded', documentLoaded, false);

var startTime;
var limit;
var timer;

function documentLoaded() {
  "use strict";

  var timerElement = document.getElementById("timer");
  timerElement.addEventListener("keydown", function (event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      startTimer();
      timerElement.blur();
    }
  });
}

function startTimer() {
  startTime = new Date();
  limit = parseInt(document.getElementById("timer").innerHTML);

  clearInterval(timer);
  timer = setInterval(updateTime, 1000);
}

function updateTime() {
  var currentTime = new Date();
  var elapsed = (currentTime.getTime() - startTime.getTime()) / 1000;

  var minutes = Math.floor(elapsed / 60);
  var seconds = Math.floor(elapsed % 60);

  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  document.getElementById("timer").innerHTML = minutes + ":" + seconds;

  var totalSeconds = minutes * 60 + seconds;
  if (totalSeconds >= limit * 60) {
    document.getElementById("timer").classList.add("red");
    clearInterval(timer); // Stop the timer
  } else {
    document.getElementById("timer").classList.remove("red");
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #0781D4;
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer {
  font-size: 36px;
  text-align: center;
}

.red {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ejercio No. 3</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="timer-container">
    <div id="timer" contenteditable="true">00:00</div>
  </div>
  <script src="script.js"></script>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/76388879/timer-isnt-dealing-with-seconds-properly

1条答案

按热度按时间

kyvafyod1#

您没有正确设置限制-您直接将其设置为计时器的内容，其中包括非数字字符，如“：”。当使用parseInt处理不全是数字的字符时，第一个非数字字符之后的任何字符都将被丢弃。因此，使用小于一分钟的任何内容进行测试，limit将被设置为0，因为“00：30”将导致parseInt为0，因为只使用冒号之前的文本。要解决这个问题，请在冒号处拆分文本，并将分钟转换为秒，如代码片段所示

let time = document.getElementById("timer").innerHTML.split(":");
//if time = "01:30", limit = 1 + 30/60 = 1.5 minutes
limit = parseInt(time[0]) + parseInt(time[1])/60;

window.addEventListener('DOMContentLoaded', documentLoaded, false);

var startTime;
var limit;
var timer;

function documentLoaded() {
  "use strict";

  var timerElement = document.getElementById("timer");
  timerElement.addEventListener("keydown", function (event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      startTimer();
      timerElement.blur();
    }
  });
}

function startTimer() {
  startTime = new Date();
  let time = document.getElementById("timer").innerHTML.split(":");
  limit = parseInt(time[0]) + parseInt(time[1])/60;

  clearInterval(timer);
  timer = setInterval(updateTime, 1000);
}

function updateTime() {
  var currentTime = new Date();
  var elapsed = (currentTime.getTime() - startTime.getTime()) / 1000;

  var minutes = Math.floor(elapsed / 60);
  var seconds = Math.floor(elapsed % 60);

  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  document.getElementById("timer").innerHTML = minutes + ":" + seconds;

  var totalSeconds = minutes * 60 + seconds;
  if (totalSeconds >= limit * 60) {
    document.getElementById("timer").classList.add("red");
    clearInterval(timer); // Stop the timer
  } else {
    document.getElementById("timer").classList.remove("red");
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #0781D4;
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer {
  font-size: 36px;
  text-align: center;
}

.red {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ejercio No. 3</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="timer-container">
    <div id="timer" contenteditable="true">00:00</div>
  </div>
  <script src="script.js"></script>
</body>
</html>

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 计时器无法正确处理秒数

1条答案

相关问题

热门标签

最新问答