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

【问题标题】：Live update of content inside html element according to time of day根据一天中的时间实时更新html元素内的内容
【发布时间】：2016-07-03 12:11:43
【问题描述】：

我正在尝试根据一天中的时间更新 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();

codepen：http://codepen.io/carpenumidium/pen/grRYoN?editors=1011

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

【问题讨论】：

@nnnnnn 完全有效！谢谢！如果您将其作为一个发布，我将接受您的回答！ :)

标签： javascript jquery

【解决方案1】：

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

为什么？假设t 是1020。t >= 600 的当前if 条件将为真，因此将执行该块而不是任何else ifs。（即使if 被跳过，1020 也大于 900 并且大于 940...）如果测试一系列>= 条件，您需要从测试最高可能性开始。（您可能还想考虑添加一个最终的else 声明，以说明现在还不是早上 6:00。）

另外，t = h + m 没有达到您的预期，因为它不允许单位数分钟（如果时间是上午 10:03，那么 h + m 将是 103）。不是将小时和分钟转换为字符串，而是将小时乘以 100：

var t = h * 100 + m;

请注意，乘以 100 不会给您多少分钟，它只是让您可以轻松地与 600 比较早上 6 点等。

（你可以做一些其他的事情来使函数更短和更可扩展，但我提到的问题是阻止它以当前形式工作的事情。）

【讨论】：

> 10:03 am then h + m will be 103 我通过 if (m
是的。请注意，我刚刚更新了答案的那一部分，将小时数乘以 100 而不是 60。如果您需要对时间进行进一步计算，这不是最好的，但要让数字 1020 表示上午 10:20，这就是您所需要的。
是的，我会使用它，顺便说一句，如果我将计时器设置为 1000 毫秒，会不会影响性能？
这不应该是性能问题，但我认为您不需要每秒更新页面，因为您的算法只测试分钟值。因此，将超时设置为60000ms 以每分钟更新一次应该没问题。
但是如果页面在 9:20:50 秒加载，计时器将关闭 50 秒，对吗？不过问题不大。

【解决方案2】：

试试这个：

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

        var t = (h * 60) + m;

        var selectedIndex = 0;

        if (t >= 620) {
            selectedIndex = 3;
        }
        else if (t >= 580) {
            selectedIndex = 2;
        }
        else if (t >= 540) {
            selectedIndex = 1;
        }

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

        document.querySelector('.current-period').innerHTML = periods[selectedIndex];

        setTimeout(schoolPeriod, 1000);
    }

    schoolPeriod();

【讨论】：

【解决方案3】：

您的 if then else 语句是错误的。它总是检查(t >= 600)

用你的替换这个：

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

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 && t< 900) {
        currentPeriod.innerHTML = "new school day";
    }  
    else if (t >= 900 && t<940) {
        currentPeriod.innerHTML = periods[0];
    }
    else if (t >= 940 & t<1020) {
        currentPeriod.innerHTML = periods[1];
    }
    else if (t >= 1020) {
        currentPeriod.innerHTML = periods[2];
    }

 setTimeout(schoolPeriod, 1000);
}

// Call the function
schoolPeriod();

希望对你有帮助:)

【讨论】：

【解决方案4】：

试试这样，时间段以分钟为单位 - 360 = 6:00

var periods = [
 ['period 1',360,365],
 ['period 2',365,400],
 ['period 3',400,460],
 ['period 4',460,520]
];
function getPeriod(){
 var period = 'School is closed';
 var minutes = new Date().getHours()*60 + new Date().getMinutes();
 for(var i=0;i<periods.length;i++){
  if(minutes>=periods[i][1] && minutes<periods[i][2]){
   period = periods[i][0];
   break;
  }
 }
 document.getElementById('period').innerHTML = period;
 setTimeout(getPeriod,1000);
}

<html>
<head>
</head>
<body onload="getPeriod();">
<div id="period"></div>
</body>
</html>

【讨论】：