Codice html più preciso

[«Kian987»]

Ciao, forse molti di voi conosceranno questo code grazie al quale è possibile cambiare lo fondo in base all'orario

<script type="text/javascript">
d=document; today=new Date(); hour=today.getHours();

if(hour>=0 && hour<6) d.write("<style>body{background-image:url('http://immagine.jpg')}<\/style>");

else if(hour>=6 && hour<12) d.write("<style>body{background-image:url('http://immagine.jpg')}<\/style>");

else if(hour>=12 && hour<18) d.write("<style>body{background-image:url('http://immagine.jpg')}<\/style>");

else if(hour>=18 && hour<21) d.write("<style>body{background-image:url('http://immagine.jpg')}<\/style>");

else d.write("<style>body{background-image:url('http://immagine.jpg')}<\/style>")
</script>

Con questo code tuttavia la precisione del contatore è all'ora; alle 17 c'è uno sfondo e alle 18 un altro. Non ci sono vie di mezzo. Si può modificare questo code per renderlo precisio al secondo? Alle 17h:20m:30s sondo 1 e alle 17h:20m:35s sfondo 2. E possibile?

In altre parole voglio che si crei un cliclo di immagini che si succedono in base all'orario con precisione al secondo.

[pierofix]

Mmm... questo script non rispetta molto le regole di buona progettazione. Non è infatti il caso di generare codice usando il metodo write. Usando il DOM si può raggiungere un risultato un po' più elegante e meno intrusivo.

Dunque, quando si pensa alla grafica di un documento, lo strumento che ci permette di gestirla è CSS. Prepariamo quindi una serie di classi che ospiteranno le immagini di sfondo:

CSS

.sfondo_1
{
   background-image:url('immagine_1.jpg');
}
.sfondo_2
{
   background-image:url('immagine_2.jpg');
}
/* e via dicendo */

Dopodichè, invece di prevedere tutte le possibili combinazioni (60×60×24 = 86400!) potresti fare in modo di caricare uno sfondo a caso a ogni caricamento della pagina. Ad esempio:

Javascript

var numero_sfondi = 2
var numero_casuale = Math.floor(Math.random() * numero_sfondi) + 1

var pagina = document.getElementsByTagName('body').item(0)
pagina.className = 'sfondo_' + numero_casuale

Se invece le immagini devono avere una sequenza coerente con il momento della giornata, allora mi sa che c'è da ragionarci su ancora un po'.

[«Kian987»]

Prima di tutto grazie della risposta

Se invece le immagini devono avere una sequenza coerente con il momento della giornata, allora mi sa che c'è da ragionarci su ancora un po'.

Purtroppo è proporio quello che mi serve. Ciclo di sfondi in base all'ora (tenendo conto delle ore, minuti e possibilmente anche i secondi)

Esempio
1) Dalle 18h:10m:05s alle 18h:20m:05s SFONDO 1
2) Dalle 18h:20m:06s alle 18h:30m:10s SFONDO 2
[...]
Se non ci sono sfondi impostati per quella data ora IMMAGINE DEFAULT

Il code che ho postato all'inizio mette l'immagine default, fa il ciclo di immagini ma con accuratezza oraria. Ho provato a modificarlo aggiuggendo i minuti ma non funziona.

[pierofix]

Prova a creare degli oggetti Date e a sfruttarne le proprietà nei cicli e negli if che vuoi scrivere.

var oggi = new Date()
var ora = oggi.getHours()
var minuti = oggi.getMinutes()
var secondi = oggi.getSeconds()

var limite_inferiore = new Date()
limite_inferiore.setHours('18')
limite_inferiore.setMinutes('10')
limite_inferiore.setSeconds('05')

var limite_superiore = new Date()
limite_superiore.setHours('18')
limite_superiore.setMinutes('30')
limite_superiore.setSeconds('10')

// Ad esempio...

if ( limite_inferiore.getHours() == 18 )
{
   if ( limite_inferiore.getMinutes() > 10 && limite_inferiore.getMinutes() < 30 && limite_inferiore.getSeconds() > 05 )
   {
      // Fai quello che devi fare...
   }
}

// e via dicendo...