Immagine che cambia a seconda dell'ora e del giorno Javascript

21-04-2017, 09.32.35

Salve a tutti,
Io vorrei gestire delle immagini sul mio sito che cambiano a seconda dell'ora e del giorno tipo http://www.kisskiss.it/
Ho già un file in php che è il seguente:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Adesso in onda su Radio Europa Live</title>
<SCRIPT language="JavaScript">
function doRefresh() {
// refresh della pagina corrente
document.location.reload();
}
// imposto il timeout per il prossimo refresh
// espresso in millisecondi (1000 = 1 secondo)
window.setTimeout("doRefresh();" , 30000);


</SCRIPT>
</head>

<body>
<script language="JavaScript">
<!--
data = new Date();
ora = data.getHours();
giorno = data.getDay();
// palinsesto domenica
if(giorno == 0 && ora >= 00 && ora <17){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 0 && ora >= 17 && ora <20){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoolreplay.jpg";
}
if(giorno == 0 && ora >= 20 && ora <21){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/discomix.jpg";
}
if(giorno == 0 && ora >= 21 && ora <22){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/scratchcontrol.jpg";
}
if(giorno == 0 && ora >= 22 && ora <24){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/clubhouse.jpg";
}

// palinsesto lun
if(giorno == 1 && ora >= 00 && ora <08){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 1 && ora >= 08 && ora <09){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/buongiornoscuola.jpg";
}
if(giorno == 1 && ora >= 09 && ora <14){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 1 && ora >= 14 && ora <15){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2017/03/ibuggati.jpg";
}
if(giorno == 1 && ora >= 15 && ora <16){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2017/03/ibuggati.jpg";
}
if(giorno == 1 && ora >= 16 && ora <17){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 1 && ora >= 17 && ora <20){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoolreplay.jpg";
}
if(giorno == 1 && ora >= 20 && ora <21){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/discomix.jpg";
}
if(giorno == 1 && ora >= 21 && ora <22){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/scratchcontrol.jpg";
}
if(giorno == 1 && ora >= 22 && ora <24){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/clubhouse.jpg";
}

// palinsesto mar
if(giorno == 2 && ora >= 00 && ora <08){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 2 && ora >= 08 && ora <09){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/buongiornoscuola.jpg";
}
if(giorno == 2 && ora >= 09 && ora <14){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 2 && ora >= 14 && ora <15){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 2 && ora >= 15 && ora <16){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/dancechart.jpg";
}
if(giorno == 2 && ora >= 16 && ora <17){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/dancechart.jpg";
}
if(giorno == 2 && ora >= 17 && ora <20){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoolreplay.jpg";
}
if(giorno == 2 && ora >= 20 && ora <21){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/discomix.jpg";
}
if(giorno == 2 && ora >= 21 && ora <22){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/scratchcontrol.jpg";
}
if(giorno == 2 && ora >= 22 && ora <24){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/clubhouse.jpg";
}

// palinsesto mer
if(giorno == 3 && ora >= 00 && ora <08){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 3 && ora >= 08 && ora <09){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/buongiornoscuola.jpg";
}
if(giorno == 3 && ora >= 09 && ora <14){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 3 && ora >= 14 && ora <15){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/doppioclick.jpg";
}
if(giorno == 3 && ora >= 15 && ora <16){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 3 && ora >= 16 && ora <17){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 3 && ora >= 17 && ora <20){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoolreplay.jpg";
}
if(giorno == 3 && ora >= 20 && ora <21){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/discomix.jpg";
}
if(giorno == 3 && ora >= 21 && ora <22){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/scratchcontrol.jpg";
}
if(giorno == 3 && ora >= 22 && ora <24){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/clubhouse.jpg";
}

// palinsesto gio
if(giorno == 4 && ora >= 00 && ora <08){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 4 && ora >= 08 && ora <09){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/buongiornoscuola.jpg";
}
if(giorno == 4 && ora >= 09 && ora <14){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 4 && ora >= 14 && ora <15){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 4 && ora >= 15 && ora <16){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoollove.jpg";
}
if(giorno == 4 && ora >= 16 && ora <17){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoollove.jpg";
}
if(giorno == 4 && ora >= 17 && ora <20){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoolreplay.jpg";
}
if(giorno == 4 && ora >= 20 && ora <21){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/discomix.jpg";
}
if(giorno == 4 && ora >= 21 && ora <22){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/scratchcontrol.jpg";
}
if(giorno == 4 && ora >= 22 && ora <24){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/clubhouse.jpg";
}

// palinsesto ven
if(giorno == 5 && ora >= 00 && ora <08){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 5 && ora >= 08 && ora <09){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/buongiornoscuola.jpg";
}
if(giorno == 5 && ora >= 09 && ora <14){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 5 && ora >= 14 && ora <15){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/nosense.jpg";
}
if(giorno == 5 && ora >= 15 && ora <16){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2017/01/schoolmovie.jpg";
}
if(giorno == 5 && ora >= 16 && ora <17){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2017/03/elritmolatino.jpg";
}
if(giorno == 5 && ora >= 17 && ora <20){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoolreplay.jpg";
}
if(giorno == 5 && ora >= 20 && ora <21){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/discomix.jpg";
}
if(giorno == 5 && ora >= 21 && ora <22){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/scratchcontrol.jpg";
}
if(giorno == 5 && ora >= 22 && ora <24){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/clubhouse.jpg";
}

// palinsesto sabato
if(giorno == 6 && ora >= 00 && ora <08){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 6 && ora >= 08 && ora <09){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/buongiornoscuola.jpg";
}
if(giorno == 6 && ora >= 09 && ora <14){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
}
if(giorno == 6 && ora >= 14 && ora <16){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/dancechart.jpg";
}
if(giorno == 6 && ora >= 16 && ora <17){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2017/02/spinthebeat.jpg";
}
if(giorno == 6 && ora >= 17 && ora <20){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/schoolreplay.jpg";
}
if(giorno == 6 && ora >= 20 && ora <21){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/discomix.jpg";
}
if(giorno == 6 && ora >= 21 && ora <22){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/scratchcontrol.jpg";
}
if(giorno == 6 && ora >= 22 && ora <24){ 
location.href="http://radioeuropalive.it/wp-content/uploads/2016/11/clubhouse.jpg";
}
// -->
</script>
</body>
</html>

In questo momento la pagina si trasforma direttamente in immagine invece io vorrei che l'immagine cambi ma su un'altra pagina. Qualcuno mi può aiutare gentilmente a modificare il codice? Grazie mille!

**mzanella** · 21-04-2017, 11.20.27

Al posto dei location.href che vedi nel codice, devi indicare a JavaScript di accedere ad un elemento <img> presente nella pagina e modificare il suo attributo src in modo che punti all'immagine desiderata.

Ad esempio:

Codice HTML:

<!DOCTYPE html>
<html>
...
  <body>
    <img src="" alt="" id="immagine_palinsesto">

    ...
    <script>
      data = new Date();
      ora = data.getHours();
      giorno = data.getDay();
      var img = document.getElementById('immagine_palinsesto');

      if (giorno == 0 && ora >= 00 && ora < 17) {
        img.src = "http://radioeuropalive.it/wp-content/uploads/2016/11/onlymusic.jpg";
      }
      // gli altri giorni/orari si modificano in modo analogo
    </script>
</html>

Discussione: Immagine che cambia a seconda dell'ora e del giorno Javascript

LinkBack

Strumenti discussione

Display

Immagine che cambia a seconda dell'ora e del giorno Javascript

Regole di scrittura