根据时间更新div内容答案

【问题标题】：Updating div content according to time根据时间更新div内容
【发布时间】：2015-10-09 07:19:40
【问题描述】：

我需要根据当前时间更新我的 Header (h1)。例如在7:45am to 8:00am'Current Event' 应该更改为'Event1'，在8:00am to 8:15am 它应该更改为'Event2'等等。

<html>
 <head>
    <title>ShriTeq 2015</title>
 </head>
<body>
<center>
  <img src = "image.png" width = "25%" height = "auto"/>
    <h1 id = "ce" style="font-weight:lighter; font-family: 'Raleway', sans-serif; font-size:70px;">Current Event</h1>
</center>
</body>
</html>

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

类似的东西？

// All events :
// Event 1 start 2015-10-09 at 00:00:00 to 06:00:00, Event 2 from 06:00:01 to 12:00:00. If out of dates, Default message is shown.
var eventTimes = [
		{
			name: "Event 1",
			from: new Date('2015-10-09T00:00:00').getTime(),
			to: new Date('2015-10-09T06:00:00').getTime()
		},
		{
			name: "Event 2",
			from: new Date('2015-10-09T06:00:01').getTime(),
			to: new Date('2015-10-09T12:00:00').getTime()
		}
		
	]


	function updateEventName() {
		var now = new Date().getTime();
		var name = "Default message";
		for (var i = 0; i < eventTimes.length; i++) {
			if (now >= eventTimes[i].from && now <= eventTimes[i].to) {
				name = eventTimes[i].name;
				break;
			}
		}
		document.getElementById("ce").innerHTML = name;

	}

// Execute the function every second
setInterval(updateEventName, 1000);

updateEventName();

<!--<html>
 <head>
    <title>ShriTeq 2015</title>
 </head>
<body> -->
<center>
  <img alt = 'Missing Img' src = "image.png" width = "25%" height = "auto"/>
    <h1 id = "ce" style="font-weight:lighter; font-family: 'Raleway', sans-serif; font-size:70px;">Current Event</h1>
</center>

<!--
</body>
</html>
-->

【讨论】：

【解决方案2】：

试试；

function headerChange(){
    var d = new Date();
    var m = d.getMinutes();
    var h = d.getHours();
    if(h == 7 && m>=45){
        $("#ce").html("Event1");
    }else if(h == 8 && m<=15){
        $("#ce").html("Event2");
    }
}
headerChange();
setTimeout(headerChange, 1000);

希望对你有帮助

【讨论】：