我对javascript还是很陌生,并且挣扎不已。我正在尝试创建一个工作时间跟踪工具,看起来像秒表。这是针对公司使用的时间跟踪应用程序,我们在构建真实事物之前正在构建的概念。现在,每个秒表基本上都用于跟踪时间,然后使用“重置”按钮将其丢弃。
到目前为止,我只剩下时间时钟的HTML和CSS。我什至不知道从JS开始。
https://jsfiddle.net/jareddix/mkqy8ad5/19/
HTML
<body>
<div id="time">
<span id="hours">00</span> :
<span id="minutes">00</span> :
<span id="seconds">00</span>
<div id="controls">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</div>
</body>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#time {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 40px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
button:hover {
background: #20262E;
cursor: crosshair;
}
#hours {
color:red;
}
#minutes {
color:blue;
}
#seconds {
color:green;
}
即使从JS入手的指导也将不胜感激。
我正在尝试学习如何在开始和停止按钮上创建click事件,以便基本上为每个点击创建一个newDate,然后从第二个newDate中减去第一个newDate,并获取总毫秒数并将其转换为秒,分钟和小时。一旦有了这些信息,就需要将其保存并发送到数据库。稍后我会过桥。