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

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

最终结果将更加准确，因为您不依赖计时器来勾选秒数，而是使用实际经过的时间间隔。

你仍然需要弄乱最终的输出格式，但Date对象具有很好的功能，允许你按照我们的小时，分钟，秒等来提取你需要的所有组件......

＆＃13;

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

＆＃13;

* {
  -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 */

＆＃13;

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

＆＃13;

Answer 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/

Answer 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/

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

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

5 个答案:

JS Fiddle Demo