2015-10-09 131 views
0

我需要根據當前時間更新我的標頭(h1)。例如,在7:45am to 8:00am'當前事件'應該更改爲'Event1',在8:00am to 8:15am它應該更改爲'Event2'等等。根據時間更新div內容

<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

嘗試;

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

希望這有助於

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 = [ 
 
\t \t { 
 
\t \t \t name: "Event 1", 
 
\t \t \t from: new Date('2015-10-09T00:00:00').getTime(), 
 
\t \t \t to: new Date('2015-10-09T06:00:00').getTime() 
 
\t \t }, 
 
\t \t { 
 
\t \t \t name: "Event 2", 
 
\t \t \t from: new Date('2015-10-09T06:00:01').getTime(), 
 
\t \t \t to: new Date('2015-10-09T12:00:00').getTime() 
 
\t \t } 
 
\t \t 
 
\t ] 
 

 

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

 
\t } 
 

 
// 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> 
 
-->