Show content for specific time period

Hi there,

I am trying to display some content for a two hour slot, for example 1.00pm - 3.00pm.

I have this code:


//initialize date object
    var d = new Date();
    var currentHour = d.getHours(); //note 0-23

    if (currentHour < 1)
     {
         $('div').append('hello');
      }
    else if (currentHour == 3)
    {
       $('div').append('content shown for two hours');
    }
    else {
       $('div').append('hello');
      }

Is there a way I can modify the above to show the content for two hours?

Thanks

Hi,

I would do it like this:

window.setInterval(function() {
  var d = new Date();
  if (d.getHours() > 12 && d.getHours() < 15) { // if it's after 1pm but before 3pm
    $('div').show();
  } else {
    $('div').hide();
  }
}, 1000 * 60) // this will run every minute

This uses setInterval to run a check every minute and hide or show the content accordingly.

I would rather go Ajax:


var currentTime = new Date();

var jsClock = new Date(currentTime);

function getTime(what){
	var output=(what.toString().length==1)? "0"+what : what;
	return output;
}

window.onload = function(){
	setInterval("displaytime()", 1000);
	refreshDiv();
}

function refreshDiv() {
	setInterval("1300Hours();", 1000 * 60); // every hour
}

function 1300Hours() {
	$('#1300').css({'display':'block'});
	$('#1500').css({'display':'none'});
}

function 1500Hours() {
	$('#1500').css({'display':'block'});
	$('#1300').css({'display':'none'});
}

function displaytime(){
	jsClock.setSeconds(jsClock.getSeconds()+1);
	var currentTimeString = getTime(jsClock.getHours())+":"+getTime(jsClock.getMinutes())+":"+getTime(jsClock.getSeconds());
	document.getElementById("clock").innerHTML = currentTimeString;
	
	if(currentTimeString == 13:00:00) {
		1300Hours();
	}
	
	if(currentTimeString == 15:00:00) {
		1500Hours();
	}
}

warning: codes untested, but I copied from my active project with a slight alteration

Thanks. I am trying ketting00’s idea.

I set this css up:


#1300{
background: #ff0000;
width: 200px;
height: 200px;
}


#1500{
background: #000000;
width: 200px;
height: 200px;
}

but where do I set up the div with the content I want to display?

Thanks

Fair enough.

Anywhere on your page. Also include a div with an id of “clock” to see a groovy clock.

I might point out a couple of things:

If the user visits your page and the time is between 13:00 and 15:00, the script won’t fire.
Also, AFAIK, a JavaScript function name cannot start with a number.

You might want to address these two points.

Pullo is right.

As I said I use Ajax to update the “div” automatically at a specific time. It’s a little more complicated and no need to show, hide the “div”.

Ah right, I was wondering where the AJAX part came into things.

So, if I understand you correctly, you keep track of the time, then when the time is between two specified points, you load the content into a pre-defined div.
Did I understand that right?

It’s not just about loading content and Ajax.

Javascript is powerful more than that. I call this automatic event.

I event light up my room with this method. Yes, keep track of time and trigger an event at a preset timing.

However, I tried to change time format from 00:00:00 to a commonly 7:30 AM unsuccessful.

:slight_smile: