在计时器中以两位数字显示小时,分钟和秒

时间:2018-08-19 08:19:58

标签: javascript timer

我正在使用javascript通过以下代码显示我的网站上经过的总时间。

它正常工作....但是问题是,当秒数= 0时,它的字段为空,而当秒数和分钟数在1到9之间时,它显示一位数字,而我想显示如下

if 59 seconds then == 00:00:59 (curretnly showing 59)
if 62 seconds then == 00:01:02 (currently showing 1:2)
if 70 seconds then == 00:01:10 (currently showing 1:10)
if 3640 seconds then == 01:00:40 (currently showing 1:0:40) 

我的意思是显示的字段应该用

固定
  

00:00:00(hh:mm:ss)

格式

javascript代码使用如下:

var timeStamp = Date.now(),
sessionStamp = sessionStorage.getItem('ts'),
elapsedTime;
  if (!sessionStamp) {
    sessionStorage.setItem('ts', timeStamp.toString());
    sessionStamp = timeStamp;
  } else {
    sessionStamp = parseInt(sessionStamp);
  }

function increment() {
    elapsedTime = Date.now() - sessionStamp;
    d1= Math.round(elapsedTime / 1000).toString();
    d = Number(d1);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? h + (h == 1 ? ":" : ":") : "";
    var mDisplay = m > 0 ? m + (m == 1 ? ":" : ":") : "";
    var sDisplay = s > 0 ? s + (s == 1 ? "0" : "") : "";

    document.getElementById('elapsedTime').textContent = hDisplay + mDisplay + sDisplay; 
 }
    setInterval(increment, 1000);

JSFIDDLE

3 个答案:

答案 0 :(得分:1)

我更新了JS小提琴http://jsfiddle.net/03L9pcm2/

这就是我改变的地方

var hDisplay = h > 0 ? (h < 10 ? "0" + h + ":" : h + ":") : "00:";
var mDisplay = m > 0 ? (m < 10 ? "0" + m + ":" : m + ":") : "00:";
var sDisplay = s > 0 ? (s < 10 ? "0" + s : s) : "00";

答案 1 :(得分:1)

您只需要将小时,分钟和秒的格式略有不同。

我在这里分叉了您的示例: http://jsfiddle.net/samrae/xb6n5Lda/6/

var timeStamp = Date.now(),
sessionStamp = sessionStorage.getItem('ts'),
elapsedTime;
if (!sessionStamp) {
  sessionStorage.setItem('ts', timeStamp.toString());
  sessionStamp = timeStamp;
}
else {
  sessionStamp = parseInt(sessionStamp);
}

function increment() {
  elapsedTime = Date.now() - sessionStamp;
  d1= Math.round(elapsedTime / 1000).toString();
  d = Number(d1);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? (h < 10 ? "0" : "") + h + ":" : "00:";
    var mDisplay = m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:";
    var sDisplay = s > 0 ? (s < 10 ? "0" : "") + s : "00";


    document.getElementById('elapsedTime').textContent = hDisplay + mDisplay + sDisplay; 
}
setInterval(increment, 1000);

您处在正确的轨道上,检查秒数是否大于0,但如果打印的字符串与所需的“ 00”相对应,则您正在打印一个空字符串。

您可以将将小时,分钟和秒分成单独的函数的逻辑分开,以便更轻松地进行操作

答案 2 :(得分:0)

这是我自己的把戏。 简单样式

var hDisplay = (h < 0 ? "00" : ("0"+h).slice(-2)) + ":";
//And others ...