如何使用 0:00:00 格式递增数字？答案

【问题标题】：How do I increment a number using 0:00:00 format?如何使用 0:00:00 格式递增数字？
【发布时间】：2015-02-20 21:44:49
【问题描述】：

我正在尝试创建以下格式的时间跟踪器； 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'));
});

});

【问题讨论】：

是的，表示经过的时间。
一个问题，如果你替换了整个元素，下次你想替换它时它就不存在了。只需更改它的内部文本或 html

标签： javascript jquery datetime time

【解决方案1】：

这是一个不涉及对 html 元素进行所有切片和切块的解决方案。我正在使用 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>

【讨论】：

【解决方案2】：

当您启动计时器时，保存当前日期时间。

var start_dt = Date.now();

当您要更新显示时，请使用以下命令开始：

var current_dt = Date.now();
var elapsed_ms = current_dt - start_dt;

这给出了经过时间的准确计数。重复递增变量会漂移。

现在，是时候格式化为 H:MM:SS

function format_timer(ms) {
   var s = ("0" + Math.floor((ms / (      1000)) % 60)).substr(-2);
   var m = ("0" + Math.floor((ms / (   60*1000)) % 60)).substr(-2);
   var h =        Math.floor((ms / (60*60*1000))     );
   return h + ":" + m + ":" + s;
}

【讨论】：

比我的 +1 更模块化的实现，这应该是答案。
我在实现这个时遇到了麻烦。当我把它放在我的提交“点击”事件中时，它不会触发。你能给我一个工作的例子吗？
那么如何停止和暂停计时器呢？你的解决方案不适合我。
我不知道你的代码为什么不起作用。如果你有问题，你知道怎么问。在 cmets 中发布“它不起作用”不是吗。
至于添加暂停（或停止）功能，您需要跟踪计时器的当前状态（活动、暂停、停止），以及暂停时还剩多少时间.

【解决方案3】：

您可以通过将秒数转换为dateTime 格式，然后使用简单的正则表达式来完成：

var myDate = new Date(null, null, null, null, null, value).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");

这是工作小提琴：http://jsfiddle.net/628xz9x7/6/

【讨论】：

它可以工作，但不能正确计时。我知道使用 getDate() 方法是正确的方法，但我不知道该怎么做。
@London804 你说的时间不正确是什么意思？请您再描述一下吗？

【解决方案4】：

如果你确定要自己实现这个逻辑，你可以利用一些基础数学。

function updateDisplay(){

    value++;

    // Example for minutes
    if (value >= 60) {
        secs = value % 60;
        mins = (value - secs) / 60;
        $(timer).find('.value').text("00:"+min+":"+secs);
        //$('#sec').replaceWith("hrs");
    }
}

您可以添加其他字段的实现，但我们在这里所做的只是通过使用模数找出一分钟内的秒数，然后从分钟数中减去秒数并除以 60 以获得分钟数过去了，我们可以用这些新值设置标签。

您可能想做的一件事是提供formatNumber 方法：

function formatNumber(number) {
   if (number < 10) {
      return "0" + number;
   }
   return number;
}

这将为数字提供格式化字符串以更新 10 以下值的标签，这里有一个测试小提琴，我还没有实现所有功能，但它对你来说是一个开始：https://jsfiddle.net/628xz9x7/14/

【讨论】：

【解决方案5】：

JS Fiddle Demo

请注意，为了更快的测试，我每毫秒而不是一秒进行一次迭代。

var start, value, timer = $('#timer');

$('#submit').click(function(){
   value = readTime(timer.text());
   start = setInterval(updateDisplay, 1); // replace 1 with 1000
});

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

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

function updateDisplay(){
    value++;
    timer.text(formatTime(value));
    if (value >= 86400) {
        value = 0;
        console.log('stop and take a break, you have been working over 24hrs!');
    }
}

function formatTime(t){
    var h = ('0' + parseInt( t / 3600 ) % 24).slice(-2),
        m = ('0' + parseInt( t / 60 ) % 60).slice(-2),
        s = ('0' + t % 60).slice(-2);
    return h+':'+m+':'+s;
}

function readTime(s){
    var r = s.split(':');
    return parseInt(r[0])*3600 + parseInt(r[1])*60 + parseInt(r[2]);
}

【讨论】：