javascript - 如何转换计数到 HH :MM:SS? 的数字

Question

我正在计算动态生成的 div 上的值:

<div class="count">285489</div>
<div class="count">258569</div>
<div class="count">263548</div>
<div class="count">245856</div>

setInterval(function(){

    $(".count").each(function() {
        let el = $(this);
        let time = Number(el.text()) + 1;
        el.text(time);
    });

}, 1000);

我想将这些数字转换为 HH:MM:SS 格式。我找到了以下代码片段来实现此目的:

String.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10); // don't forget the second param
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds;
}

我修改了 setInterval() 函数以使用上面的这个函数

setInterval(function(){

    $(".prod").each(function() {
        let el = $(this);
        let time = Number(el.text()) + 1;
        time = time.toString();
        el.text(time.toHHMMSS());
    });

}, 1000);

但是，当我运行它时，这些值仅增加一秒。增量后，值显示为 NaN:NaN:NaN。

我不明白。当 div 下次递增时应该始终有可用的新值时，为什么它显示 NaN？

setInterval() 在我的 Ajax 完整函数中触发

我需要的只是将这些值显示为 HH:MM:SS 而不仅仅是普通数字。

有人可以帮忙吗？

Answer 1

第一次调用.toHHMMSS后，所有div文本都变成HH:MM:SS格式。在 .setInterval 的下一次迭代中，我们尝试将 HH:MM:SS 格式的字符串解析为 int，但失败并生成 NaN (因为它不是数字)。要解决此问题，您有两种选择:

1. 编写一个函数将 HH:MM:SS 转换回秒，然后递增并运行 .toHHMMSS。

String.prototype.fromHHMMSS = function () {
    if (isNaN(this)) {
        var timeStrArr = this.split(":");
        var hours   = Integer.parseInt(timeStrArr[0]);
        var minutes = Integer.parseInt(timeStrArr[1]);
        var seconds = Integer.parseInt(timeStrArr[2]);
        var totalSeconds = hours * 3600 + minutes * 60 + seconds

        return totalSeconds;
    } else {
        return Number(this);
    }
}

setInterval(function(){

    $(".prod").each(function() {
        let el = $(this);
        let time = el.text().fromHHMMSS() + 1;
        time = time.toString();
        el.text(time.toHHMMSS());
    });

}, 1000);

直接处理 HH:MM:SS 格式的字符串。