Javascript 如何逐个记录多个时间值_Javascript_Html_Timer_Innerhtml

Javascript 如何逐个记录多个时间值

javascript html timer

Javascript 如何逐个记录多个时间值,javascript,html,timer,innerhtml,Javascript,Html,Timer,Innerhtml,我有一个问题，打印5个不同的值一个接一个。我的代码应该是这样工作的：用户按下“开始”按钮，计时器开始，然后用户按下“停止”按钮，计时器停止，并将经过的时间打印在下面。用户这样做了5次，根据用户的速度，下面的每个条目都应该有不同的时间值。（例如，“1.你花了2.3秒。2.你花了1.7秒。等等）我的代码似乎打印了第一次的时间值，但当我第二次尝试时无法使其工作时，我尝试添加if语句来检查第一个内部html标签是否已填充，但这不起作用这是我的密码： var status=0；//0:停止1:运行

我有一个问题，打印5个不同的值一个接一个。我的代码应该是这样工作的：

用户按下“开始”按钮，计时器开始，然后用户按下“停止”按钮，计时器停止，并将经过的时间打印在下面。用户这样做了5次，根据用户的速度，下面的每个条目都应该有不同的时间值。（例如，“1.你花了2.3秒。2.你花了1.7秒。等等）

我的代码似乎打印了第一次的时间值，但当我第二次尝试时无法使其工作时，我尝试添加if语句来检查第一个内部html标签是否已填充，但这不起作用

这是我的密码：

var status=0；//0:停止1:运行
var时间=0；
var f=0；
var s=0；
var t=0；
var f=0；
var f2=0；
函数start（）{
状态=1；
document.getElementById（“startBtn”）.disabled=true；
定时器（）；
如果（f=0）{
f+1；
}如果（f>0），则为else{
s+1；
}
}
函数停止（）{
如果（f=1）{
document.getElementById（“first”）.innerHTML=time+1；
f++；
}
如果（s=1）{
document.getElementById（“second”）.innerHTML=time+1；
s++；
}
状态=0；
document.getElementById（“startBtn”）.disabled=false；
}
函数重置（）{
状态=0；
时间=0；
document.getElementById（'timerLabel'）。innerHTML='00:00:00'；
document.getElementById（“startBtn”）.disabled=false；
}
函数计时器（）{
如果（状态==1）{
setTimeout（函数（）{
时间++；
var min=数学下限（时间/100/60）；
var秒=数学下限（时间/100）；
var mSec=时间%100；
如果（最小值<10）{
最小值=“0”+最小值；
}
如果（秒>=60）{
秒=秒%60；
}
如果（第10节）{
秒=“0”+秒；
}
document.getElementById（'timerLabel'）。innerHTML=min+“：“+sec+”：“+mSec；
定时器（）；
}, 10);
}
}

我马上看到几个问题

首先，您有两次
```
var f=0
```
您有
```
f+1；
```
和
```
s+1；
```
但是这些语句不返回任何内容，您希望
```
s++；
```
和
```
f++；
```
或
```
s+=1；
```
和
```
f+=1；
```
如果您希望
```
s
```
和
```
f
```
变量递增
您的
```
if
```
条件使用
```
=
```
，它用于赋值，因此将始终返回
```
true
```
，而不是
```
==
```
（带转换的相等），或者更好的是，
```
===
```
（严格相等）

解决这些问题可能会让你振作起来

但是，这个解决方案也太复杂了

首先，（
```
onclick
```
，等等），您应该用JavaScript设置所有事件处理
接下来，似乎您要做的事情有太多的变量。据我所知，确实不需要
```
状态
```
。如果您在
```
停止
```
功能中，很明显您被停止了。如果您在
```
定时器
```
功能中，您必须启动。我也不认为需要
```
f
```
、
```
s
```
、
```
f2
```
和
```
t
```
变量或跟踪它们的代码
在这种情况下，您忘记检查
```
mSec
```
是否有个位数，并在
```
0
```
之前加上一个前缀
仅当您提供的字符串包含需要浏览器解析的HTML时，才使用
```
.innerHTML
```
。如果字符串中没有HTML，则会无故调用HTML解析器，这是一种资源浪费。对于非HTML字符串，请使用
```
.textContent
```

您也不需要提前为结果设置空的

占位符。您可以动态创建占位符，这样可以减少HTML和JavaScript来测试和匹配它们


与
注释相关，您应该使用标记，因为它们传达的语义，而不是因为浏览器应用于它们的默认格式。
对于您的秒表
页面标题是合适的，因为这是一个标题，但是显示经过的时间是不正确的，因为它不是一个节头而且，为了显示点击之间的不同时间，一个项目符号列表是合适的，因为你正在制作一个列表。使用正确的标签来完成任务，然后使用CSS来设计你想要的任何样式
而且，通过将创建00:00:00
字符串的代码分离为它自己的函数，您可以在需要创建该格式时调用它


我相信我已经完成了下面您想要的。有关解释，请参阅评论：

var time=0；//存储经过的时间计数
var timeout=null；//将保留对setTimeout的引用
var lastTime=null；//存储上次按下停止按钮时的时间计数
//获取您将使用的所有DOM引用，仅一次
//并使其可用于所有功能，因此您不需要
//一次又一次地寻找他们。
var btnStart=document.getElementById（“startBtn”）；
var btnStop=document.getElementById（“stopBtn”）；
var btnReset=document.getElementById（“resetBtn”）；
var timerLabel=document.getElementById（'timerLabel'）；
var results=document.getElementById（“结果”）；
//用JavaScript而不是HTML设置事件处理程序
btnStart.addEventListener（“单击”，开始）；
btnStop.addEventListener（“单击”，停止）；
btnReset.addEventListener（“单击”，重置）；
函数start（）{
btnStart.disabled=true；
timeout=setTimeout（函数（）{
time++；//递增时间计数
timerLabel.textContent=getFormattedTime（time）；//使用格式化时间更新计数器
start（）；//再次运行计时器