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)
    else if (currentHour == 3)
       $('div').append('content shown for two hours');
    else {

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



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
  } else {
}, 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);

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

function 1300Hours() {

function 1500Hours() {

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

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:

background: #ff0000;
width: 200px;
height: 200px;

background: #000000;
width: 200px;
height: 200px;

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


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.