javascript - 如何使用 0 :00:00 format? 递增数字

Question

我正在尝试创建以下格式的时间跟踪器； 0:00:00。第一个零代表小时，然后是分钟，然后是秒。目前，我有一个工作函数，每秒都会增加数字。我知道有一种正确的方法可以使用 getDate() 执行此操作，然后使用 getHours()、getMinutes() 等修改小时、分钟和秒。我似乎无法让这一切一起工作。我附上了一个可用的 jsFiddle 来显示我已经走了多远。

目标是让它看起来像...0:00:59，然后变成0:01:00，依此类推。谢谢。

完整示例@ http://jsfiddle.net/London804/628xz9x7/2/

$('#submit').click(function(){
var start = setInterval(updateDisplay, 1000), // every millisecond call updateDisplay
   timer = $('#timer'),
   value = parseInt($(timer).find('.value').text(), 10);



function updateDisplay(){

    value++;
    $(timer).find('.value').text(value);
    if (value >= 60) {
        $('#sec').replaceWith("min");
    }
    if (value >= 3600) {
        $('#sec').replaceWith("hrs");
    }
    if (value >= 86400) {
        value = 0;
        console.log('stop and take a break, you have been working over 24hrs!');

    }
}

$('#stop').click(function(){
    clearInterval(start);
});
$('#reset').click(function(){
    clearInterval(start);
    value = parseInt($(timer).find('.value').text('0'));
});

});

Answer 1

这是一个不涉及 html 元素的所有切片和切 block 的解决方案。我使用 Date 对象来跟踪耗时(以毫秒为单位)，并通过提取 Date 对象提供的标准格式字符串的子字符串来更新显示。

最终结果会更加准确，因为您不依赖计时器来计时秒数，而是使用调用之间的实际耗时。

您仍然需要搞乱最终的输出格式，但 Date 对象具有很好的功能，允许您提取您需要的所有组件，如小时、分钟、秒等......

var starting_ms ;
var elapsed ;
var $timer = $('#timer .value');
var $hrs = $('#elapsedtime #hrs');
var $min = $('#elapsedtime #min');
var $sec = $('#elapsedtime #sec');
var start;

function updateDisplay() {
  elapsed.setTime(Date.now() - starting_ms);
  $timer.text(elapsed.toUTCString().substr(20, 5));
  
  $hrs.text(elapsed.getUTCHours() );
  $min.text(elapsed.getUTCMinutes() );
  $sec.text(elapsed.getUTCSeconds() );
}

$('#submit').click(function() {
  if( start )
    clearInterval(start);
  starting_ms = Date.now();
  elapsed     = new Date(0);
  
  start = setInterval(updateDisplay, 1000); // every millisecond call updateDisplay
});

$('#stop').click(function() {
  clearInterval(start);
});

$('#reset').click(function() {
  clearInterval(start);
  starting_ms = Date.now();
  updateDisplay();
  
});

* {
  -webkit-tap-highlight-color: transparent
}
body {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  background-color: #E4E4E4;
  background-image: linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  background-image: -webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  background-image: -ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4));
  background-attachment: fixed;
  font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  text-transform: uppercase;
  width: 100%
}
.app {
  background: transparent url(../../img/logo.png) no-repeat center top;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 50px;
  width: 225px;
  text-align: center;
  padding: 180px 0px 0px 0px;
  margin: -115px 0px 0px -112px
}
.app #login {
  margin-top: 20px;
  position: relative;
  font-size: 18px;
  text-transform: uppercase
}
.app #login:active {
  color: #cbcbcb
}
#welcome {
  width: 90%;
  margin: 20px auto
}
@media screen and (min-aspect-ratio: 1 / 1) and (min-width: 400px) {
  .app {
    background-position: left center;
    padding: 75px 0px 75px 170px;
    margin: -90px 0px 0px -198px
  }
}
h1 {
  font-size: 24px;
  font-weight: normal;
  margin: 0px;
  overflow: visible;
  padding: 0px;
  text-align: center
}
.event {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  color: #FFFFFF;
  font-size: 12px;
  margin: 0px 30px;
  padding: 2px 0px
}
.event.listening {
  background-color: #333333;
  display: block
}
.event.received {
  background-color: #4B946A;
  display: none
}
@keyframes fade {
  from {
    opacity: 1.0
  }
  50% {
    opacity: 0.4
  }
  to {
    opacity: 1.0
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 1.0
  }
  50% {
    opacity: 0.4
  }
  to {
    opacity: 1.0
  }
}
.blink {
  animation: fade 3000ms infinite;
  -webkit-animation: fade 3000ms infinite
}
#timer-container {
  min-width: 300px;
  max-width: 50%;
  margin: 0 auto
}
#timer-container #timer {
  text-align: center;
  font-size: 20px;
  color: #4887da;
  font-weight: bold
}
#timer-container label {
  display: block
}
#timer-container label input {
  width: 98%
}
#timer-container #button-container {
  text-align: center
}
#timer-container #button-container button {
  -webkit-box-shadow: 0px 1px 5px 3px #9c899c;
  -moz-box-shadow: 0px 1px 5px 3px #9c899c;
  box-shadow: 0px 1px 5px 3px #9c899c;
  width: 35%;
  margin: 10px auto;
  position: relative
}
#timer-container #button-container button:nth-child(2) {
  width: 20%
}
/*# sourceMappingURL=styles.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome">
  <h2>Welcome please log in</h2>

  <p>Stuff ...</p>
</div>
<div>
  <fieldset id="timer-container">
    <div id="timer"><span class="value">0:00</span>  <span id="sec">sec</span>

    </div>
    <div id="button-container">
      <button id="submit" type="submit">Start</button>
      <button id='reset' type="reset">Reset</button>
      <button id="stop" type="stop">Stop</button>
    </div>
  </fieldset>
  
  
  <table id="elapsedtime">
    <caption>Just for fun</caption>
    <tr>
      <td>Hrs</td><td>Min</td><td>Sec</td>
    </tr>
    <tr>
      <td><span id="hrs"></span></td><td><span id="min"></td><td><span id="sec"></td>
    </tr>
    </table>  
</div>