CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
KidCoder
KidCoder

Reputation: 363

Updating div content according to time

I need to update my Header (h1) according to the current time. For example at 7:45am to 8:00am 'Current Event' should change to 'Event1', at 8:00am to 8:15am it should change to 'Event2' and so on.

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

Upvotes: 0

Views: 60

Answers (2)

Alfred
Alfred

Reputation: 21386

Try;

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

Hope this helps

Upvotes: 0

aprovent
aprovent

Reputation: 961

Something like that ?

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

Upvotes: 1

Related Questions