Question

我想编写一个脚本，从早上8点开始每秒更改<span>内显示的小时数，并且不断重复12小时（上午11点，下午12点，...，晚上11点，上午12点，凌晨1点，......）。

图像将在上午8点和晚上8点发生变化。晚上8点，图像将变为睡眠面，并且在早上8点，图像将变回笑脸。但是，这不是问题。

问题是：

当我设置var hour = Number(document.getElementById("time").textContent);时，setInterval会毫无问题地重复这段时间。但是，当我设置var hour = 8而保留相同的代码时，setInterval只会重复一次。你可以告诉我为什么会这样，以及如何使用var hour = 8修复它？
当小时反复增加时，在中午（中午12点）到达12时，我无法改变回AM。例如，代码从上午8点到晚上11点工作正常，但当它达到12时，PM不会更改为AM。你能告诉我如何解决它吗？
最后，当我更改var period = "AM"而不是像上面那样使用DOM getElementByID并保留相同的代码时，它会运行到1PM然后更改为2AM并且永远不会再次更改为PM。你能解释一下为什么会这样吗？

如果你不知道我在说什么，你可以运行我的代码并了解更多。

这是HTML：

<h2>Life goes on!</h2>
<p>The current time is : <span id = "time">8</span> <span id = "period"> AM</span></p>
<img id = "emoticon" src = "smile.gif" alt = "awake">

这是我的JavaScript代码：

setInterval(function () {
    var hour = Number(document.getElementById("time").textContent);
    hour++;
    var period = document.getElementById("period").textContent;

    if (hour >= 12) {
        hour = hour - 12;
        period = "PM";
    }

    if (hour == 0) {
        hour = 12;
    }


    document.getElementById("time").textContent = hour;
    document.getElementById("period").textContent = period;
    if (hour == 8 && period == "PM") {
        document.getElementById("emoticon").src = "sleep.gif";
        document.getElementById("emoticon").alt = "sleep";
    } else if (hour == 8 && period == "AM") {
        document.getElementById("emoticon").src = "smile.gif";
        document.getElementById("emotion").alt = "awake";
    }
}, 1000);

Answer 1

让我用您提出的相同三点来解释代码的问题：

关于var hour = 8;的问题是，如果您在setInterval回调中设置小时，您的小时将在任何时间设置为8 。因此，您的setInterval不会只运行一次，但会无限次运行，将时间始终设置为9。为避免这种情况，您可以将变量移到之外并将其设置为全局，在开始8之前将其设置为setInterval 。

要在“PM”到达12 PM时将其更改回“AM”，只需添加if语句（或者更好的是ternary operator，就像我在下面的代码段中所做的那样） 检查周期是“PM”还是“AM”，并且表现为。此外，请务必小心检查：如果您直接在.textContent上查看，请确保<span>内的文字没有任何尾随空格：使用.trim()删除额外的空格在字符串的开头和结尾。

这与第1点的问题相同：您应该将变量period设为全局，然后启动setInterval。

以下脚本的逻辑很简单：

将hour增加1

如果新hour等于12，则切换为“PM”或返回“PM”

如果新hour大于12，则将其重置为1

显示小时和期间

当它是晚上8点时从smile.gif更改为sleep.gif，反之亦然，当它是早上8点时。

我还做了一些小改动，使代码更容易，更快速地阅读。 这是一个有效的代码段：

var hour = 8, period = "AM"; setInterval(function() { if (++hour >= 12) { if (hour > 12) hour = 1; else period = (period == "PM") ? "AM" : "PM"; } document.getElementById("time").textContent = hour; document.getElementById("period").textContent = period; if (hour == 8 && period == "PM") { document.getElementById("emoticon").src = "sleep.gif"; document.getElementById("emoticon").alt = "sleep"; } else if (hour == 8 && period == "AM") { document.getElementById("emoticon").src = "smile.gif"; document.getElementById("emotion").alt = "awake"; } }, 1000);

<h2>Life goes on!</h2> <p>The current time is: <span id="time">8</span> <span id="period">AM</span></p> <img id="emoticon" src="smile.gif" alt="awake">

现在，它现在正常运行，试一试点击“运行代码段”。

javascript中的setInterval和12小时制

1 个答案: