Skip to content Skip to sidebar Skip to footer
Home / Ajax / Css / Html / Javascript / Jquery

Updating Div Content According To Time

Post a Comment
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 'E

Solution 1:

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


	functionupdateEventName() {
		var now = newDate().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 secondsetInterval(updateEventName, 1000);

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

Solution 2:

Try;

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

Hope this helps

Post a Comment for "Updating Div Content According To Time"