如何用00:00的时间格式修复我的Javascript秒表？(秒:毫秒)
如何用00:00的时间格式修复我的Javascript秒表？(秒:毫秒)
提问于 2019-02-21 00:30:58
有什么办法让它运行秒表吗？我不需要任何开始或停止按钮，它应该只是运行秒表时，页面加载和秒表需要继续运行。
我已经完成了所有其他工作，但我找不到一个函数使用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
Stack Overflow用户
回答已采纳
发布于 2019-02-21 00:46:08
按照您的做法，秒表可以从任意随机数开始(因为它从当前秒开始)。我建议你自己做下面的东西。然而，如果您不想制作自己的，请看第二个或第三个片段.。
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()得到了几分钟和几秒的时间，基本上使用了一些您想要的语句对其进行格式化。
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>
Stack Overflow用户
发布于 2019-02-21 00:44:37
您可以使用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>
Stack Overflow用户
发布于 2019-02-21 00:48:06
下面是一些将其分解并正确格式化的代码。
注意:我们有一个基‘开始’日期减去，这允许我们工作像一个真正的秒表。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54797380
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号