使用moment.js实现计数器的递增功能

Question

我正在尝试实现一个计时器，从00:00:00（小时：分钟：秒）开始，并每秒在 span 中显示它。我无法从小时=00开始。它一开始就显示10:00:00。

下面是代码：

var startTimestamp;
function startTimer()
{
    var startTimestamp = moment().startOf("day");
    setInterval(function() {
        startTimestamp++;
        document.getElementById('timer').innerHTML = 
            moment.unix(startTimestamp).format('hh:mm:ss');
    }, 1000);
}

你知道为什么它不起作用吗？

- MrScf

---

可能是本地化问题？从 moment 输出当前时间，看看它是否在末尾包含 'z'，这将表示为 UTC 时间。 - Steve

输出结果末尾不包含任何“z”... - MrScf

现在它还输出10吗？或者已经改变了？如果已经改变，那么这表明它是一个本地化问题，并且您没有从Moment获得正确的时区。 - Steve

Answer 1

既然startTimestamp是一个 moment 对象，你可以使用add()方法来修改其值，而不是使用startTimestamp++。需要注意的是，add()：

通过添加时间来改变原始 moment 对象。

因此，使用moment.unix()没有必要，你可以直接在startTimestamp上使用format()方法。

最后，根据format()文档所述，小写的hh表示01 02 ... 11 12小时制，而大写的HH则表示00 01 ... 22 23小时制，因此我认为你应该使用后者。

下面是一个实时示例：

function startTimer()
{
    var startTimestamp = moment().startOf("day");
    setInterval(function() {
        startTimestamp.add(1, 'second');
        document.getElementById('timer').innerHTML = 
            startTimestamp.format('HH:mm:ss');
    }, 1000);
}

startTimer();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

<div id="timer"></div>

- VincenzoC