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

我正在尝试根据一天中的时间更新html元素中的内容，我正在做类似于这样的事情:根据时间更新div内容，但我希望内容在没有页面刷新的情况下更新

代码:

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

我做错了什么?谢谢你的帮助!

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

为什么?假设t是1020。t >= 600的当前if条件将为真，因此将执行该块而不是任何else if块(即使跳过if, 1020也大于900和大于940…)如果测试一系列>=条件，您需要从测试最高可能性开始。(您可能还想考虑在上午6点之前添加最后的else语句。)

同样，t = h + m也不像你期望的那样，因为它不允许一位数的分钟(如果时间是10:03 am，那么h + m将是103)。不将小时和分钟转换为字符串，而是将小时乘以100:

var t = h * 100 + m;

请注意，乘以100并不能给你多少分钟，它只是让你更容易与600在早上6点进行比较，等等。

(您还可以做其他事情来使函数更短、更可扩展，但我所讨论的问题是阻止它以当前形式工作的事情。)

试试这个:

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();

if then else语句是错误的。总是check (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();

希望对你有帮助

尝试这样做，周期以分钟为单位设置- 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>

相关内容

最新更新

热门标签：