如何使用00:00时间格式修复Java秒表? (秒:毫秒)

时间:2019-02-21 00:30:59

标签: javascript function innerhtml stopwatch

有什么办法让它运行秒表吗?我不需要任何开始或停止按钮,它应该只在页面加载时运行秒表,而秒表需要继续运行。

我已经完成了所有其他工作,但找不到用于秒表的00:00格式的函数。有没有执行该命令的命令?

“ d.getSeconds()”并不是为我做的。

new Date();
var testVar = window.setInterval(update, 10);

function update() {
  var d = new Date();
  document.getElementById("seconds").innerHTML = d.getSeconds();
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>

有什么方法可以使innerHTML成为具有“ 00:00”格式的常规秒表?

3 个答案:

答案 0 :(得分:1)

您可以使用padStart以及一些数学运算来设置秒表的格式:

window.setInterval(update, 1000);
function update(){
    var d = new Date();
    var minutes = Math.floor(d.getSeconds() / 60)
    var seconds = d.getSeconds() % 60
    var time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    document.getElementById("seconds").innerHTML = time
}
<h1>Stop Watch</h1>
<p>Elapsed Time:</p>
<p id="seconds"></p>

答案 1 :(得分:1)

您的操作方式是,秒表可以从任意随机数开始(因为它从当前秒开始)。我建议您在下面简单地做一遍。 但是,如果您不想自己制作,请查看第二个或第三个代码段。

var testVar = window.setInterval(update, 10);
var seconds = 0;
var milliseconds = 1;

function update() {
  if (milliseconds == 100) {
    milliseconds = 0;
    seconds++;
  }
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
  milliseconds++;
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds">00:00</p>

如果您想继续按照自己的方式进行操作,请查看下面的代码段。我从new Date()开始花费了几分钟和几秒钟,基本上使用了一些if语句来格式化它。

update();
var testVar = window.setInterval(update, 10);
var seconds;
var milliseconds;
var d;

function update() {
  d = new Date();
  seconds = d.getSeconds();
  milliseconds = Math.floor((d.getMilliseconds() / 10));
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>

答案 2 :(得分:1)

下面是一些将其分解并正确格式化的代码。

注意:我们有一个基本的“开始”日期减去,这使我们可以像真正的秒表一样工作。

let base = Date.now(); // Milliseconds
var testVar = window.setInterval(update, 10);

const displayNum = (num) => num.toString().padStart(2,'0');

function update() {
  let mil = Date.now() - base;
  let sec = Math.floor( mil/1000 );
  mil = mil%1000;
  let min = Math.floor( sec/60 );
  sec = sec%60;
  document.getElementById("seconds").innerHTML = `${displayNum(min)}:${displayNum(sec)}:${displayNum(mil)}`;
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>