如何为秒表时间跟踪器创建点击功能

时间:2019-01-29 18:15:42

标签: javascript jquery html css

我对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,并获取总毫秒数并将其转换为秒,分钟和小时。一旦有了这些信息,就需要将其保存并发送到数据库。稍后我会过桥。

0 个答案:

没有答案