根据时间

时间:2015-10-09 07:19:41

标签: javascript jquery html css ajax

我需要根据当前时间更新我的标头(h1)。例如,在7:45am to 8:00am'当前事件'应更改为&{39; 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>

2 个答案:

答案 0 :(得分: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>
-->

答案 1 :(得分:0)

尝试;

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

希望这有帮助