用空值填充日期 (HH:MM:SS) - str.length 数字 returns 未定义

Question

在网页游戏中，我试图以 HH:MM:SS 格式显示剩余时间 -

通过使用以下代码（后端通过 Websockets 将剩余的纪元时间戳发送为 game.expire1 和 game.expire2）：

var expireDiv1 = $('#expire1');
var expireDiv2 = $('#expire2');

setInterval(function() { 

    var now = Math.floor(new Date().getTime() / 1000);
    var left1 = game.expire1 - now;
    var left2 = game.expire2 - now;

    if (left1 > 0) {
            var hh1 = Math.floor(left1 / 60 / 60) % 60;
            var mm1 = Math.floor(left1 / 60) % 60;
            var ss1 = left1 % 60;

            expireDiv1.html(
                    hh1 + 
                    (mm1.length > 1 ? ':' : ':0') + // DELIMITER; DOES NOT WORK
                    mm1 + 
                    (ss1.length > 1 ? ':' : ':0') + // DELIMITER; DOES NOT WORK
                    ss1);
    } else {
            expireDiv1.html('');
    }

    if (left2 > 0) {
            var hh2 = Math.floor(left2 / 60 / 60) % 60;
            var mm2 = Math.floor(left2 / 60) % 60;
            var ss2 = left2 % 60;

            expireDiv2.html(
                    hh2 + 
                    (mm2.length > 1 ? ':' : ':0') + // DELIMITER; DOES NOT WORK 
                    mm2 + 
                    (ss2.length > 1 ? ':' : ':0') + // DELIMITER; DOES NOT WORK
                    ss2);
    } else {
            expireDiv2.html('');
    }
}, 1000);

正如你在上面看到的，我天真的技巧是根据字符串长度将小时、分钟和秒之间的分隔符设置为 ':' 或 ':0' -

(ss1.length > 1 ? ':' : ':0')

然而这并没有像预期的那样工作，因为 ss1.length returns undefined 而不是我期望的 1 或 2（我认为 Javascript 会转换我的整数字符串的秒数？）

作为最便携的解决方法，您在这里推荐什么？

Answer 1

怎么样

(ss1 >= 10 ? ':' : ':0')

另请参阅 Pad a number with leading zeros in JavaScript 了解更多选项。

Answer 2

你检查的.length属性的变量是numbers，这种变量没有那个属性。你可以做的而不是 val.length > 1 是 val > 9.

Answer 3

日期对象有获取小时、分钟和秒的方法。您可以将它们放入一个数组中，必要时添加 0 并调用 join 方法将数组连接成带有“:”分隔符的字符串，

 var left1 = new Date(/*game.expire1 - now*/);

 var left1hours = left1.getHours();
 var left1minutes = left1.getMinutes();
 var left1seconds = left1.getSeconds();

 var timeArray = [left1hours, left1minutes, left1seconds].map(function (l1) {
  return (l1<10)? "0"+l1 : l1;
 })

 console.log(timeArray.join(":"))

这是一个功能版本，同样的逻辑我只是让它更紧凑。

 function timestampToHMMSS(ts) {
 
  return ["getHours", "getMinutes", "getSeconds"]
   .map(function(s) {
    return (new Date(ts))[s]();
   })
   .map(function (t) {
    return (t<10)? "0"+t : t;
   })
   .join(":");
 }
 
 console.log(timestampToHMMSS(new Date()));
 console.log(timestampToHMMSS(1517948038*1000));

用空值填充日期 (HH:MM:SS) - str.length 数字 returns 未定义

Stuffing date (HH:MM:SS) with nulls - str.length on a number returns undefined

javascript

date

string-length