我需要根据当前时间更新我的标头(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>
答案 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);
希望这有帮助