javascript - 根据一天中的时间实时更新 html 元素内的内容

Question

我正在尝试根据一天中的时间更新 html 元素内的内容，我正在做类似的事情:Updating div content according to time但我希望内容能够在不刷新页面的情况下更新。

代码:

function schoolPeriod() {
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();

    // prepend minutes with 0 if < 10
    if (m < 10) {
      m = "0" + m;
    }

    h = h.toString();
    m = m.toString();

    var t = h + m;

    var periods = [
        "school assembly",
        "first period",
        "second period",
        ];

        var currentPeriod = document.querySelector('.current-period');

        if (t >= 600) {
            currentPeriod.innerHTML = "new school day";
        }  
        else if (t >= 900) {
            currentPeriod.innerHTML = periods[0];
        }
        else if (t >= 940) {
            currentPeriod.innerHTML = periods[1];
        }
        else if (t >= 1020) {
            currentPeriod.innerHTML = periods[2];
        }

    setTimeout(schoolPeriod, 1000);
}
schoolPeriod();

代码笔:http://codepen.io/carpenumidium/pen/grRYoN?editors=1011

我做错了什么？感谢您的帮助!

Answer 1

您需要颠倒 if/else if/else if/else if 测试的顺序。

为什么？假设 t 是 1020。当前 t >= 600 的 if 条件将为 true，因此将执行该 block ，而不是执行以下任何 block else if。 (即使跳过 if，1020 也大于 900 且大于 940...)如果测试一系列 >= 条件，您需要从测试开始可能性最高。 (您可能还需要考虑在凌晨 6:00 之前添加最后的 else 语句。)

此外，t = h + m 不会执行您所期望的操作，因为它不允许使用单位数分钟(如果时间是上午 10:03，则 h + m 将是 103)。不要将小时和分钟转换为字符串，而是将小时乘以 100:

var t = h * 100 + m;

请注意，乘以 100 并不会给出分钟数，它只是让您可以轻松地与上午 6 点的 600 等进行比较。

(您还可以采取其他措施来使函数更短且更具可扩展性，但我所讨论的问题是阻止其以当前形式运行的问题。)