javascript - javascript中的setInterval和12小时制

Question

我想编写一个脚本来更改 <span> 中显示的小时每秒，从上午 8 点开始，像 12 小时制一样不断重复(上午 11 点、中午 12 点、...、中午 11 点、上午 12 点、凌晨 1 点...)。

图像将在上午 8 点和晚上 8 点更改。晚上 8 点，图像会变成睡脸，早上 8 点，图像会变回笑脸。不过，这不是问题。

问题是:

1. 当我设置 var hour = Number(document.getElementById("time").textContent);然后setInterval重复时间没有任何问题。但是，当我设置 var hour = 8相反，并保留相同的代码，然后 setInterval只重复一次。你能告诉我为什么会这样以及如何用 var hour = 8 修复它吗？ ?

2. 当小时数反复增加时，我无法聪明地在过了中午 (12PM) 后到达 12 点时变回 AM。例如，代码在上午 8 点到晚上 11 点之间运行良好，但当它到达 12 点时，PM 不会更改为 AM。你能告诉我如何修复它吗？

3. 最后当我改变var period = "AM"而不是使用 DOM getElementByID像上面一样并保持相同的代码，然后它运行到下午 1 点，然后更改为凌晨 2 点，再也不会更改为下午。你能给我解释一下为什么会这样吗？

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

这是 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

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

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

2. 要在中午 12 点时将“PM”改回“AM”，只需添加 if语句(或者更好的是 ternary operator ，就像我在下面的代码片段中所做的那样)检查时间段是“PM”还是“AM”，并据此行事。另外，检查时要小心:如果你直接检查 .textContent确保 <span> 中的文字没有任何尾随空格:使用 .trim()删除字符串开头和结尾的多余空格。

3. 这与第 1 点的问题相同:您应该使变量 period全局，然后启动 setInterval .

下面的脚本逻辑很简单:

1. 增加 hour 1
2. 如果新hour等于 12，然后切换到“PM”或返回“PM”
3. 如果新hour大于12，则重置为1
4. 显示小时和时段
5. 从 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">

在这里，它现在工作正常，试一试点击“运行代码片段”。