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

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

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

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;
}

Answer 2

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

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

这里正在工作fiddle：http://jsfiddle.net/628xz9x7/6/

Answer 3

如果你有把握自己实现这个逻辑，你可以利用一些基础数学。

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 的值的标签，测试 fiddle 在这里，我还没有实现所有功能，但这对你来说是一个开始：https://jsfiddle.net/628xz9x7/14/

Answer 4

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]);
}

Answer 5

这是一个解决方案，不涉及 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>

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

How do I increment a number using 0:00:00 format?

javascript

time

jquery

datetime

JS Fiddle Demo