Sfondo che cambia a seconda dell'orario

Da Insane Gio 9 Gen 2014 - 13:38

Sfondo che cambia a seconda dell'ora

Salve con questo tutorial lo sfondo si cambierà a seconda dell'orario ecco un esempio:
Sfondo che cambia a seconda dell'orario Tutori10

Ovviamente potrete cambiare le immagini a vostro piacimento.
Iniziamo con il tutorial andate in:

PDA Moduli Gestione dei codici Javascript Creare un nuovo script Tutte le pagine

Codice:: $(function () { //ZONA EDITABLE------------------------------------------------------------ var selector_css = "body"; var imagen_se_repite = true; var imagen_fija = false; var horario_inicio = new Array(); horario_inicio["mañana"] = 5; horario_inicio["tarde"] = 12; horario_inicio["noche"] = 21; var imagenes = new Array(); imagenes["mañana"] = "http://i35.servimg.com/u/f35/17/45/19/77/manana11.jpg"; imagenes["tarde"] = "http://i35.servimg.com/u/f35/17/45/19/77/tarde11.jpg"; imagenes["noche"] = "http://i35.servimg.com/u/f35/17/45/19/77/noche11.jpg"; //FIN ZONA EDITABLE---------------------------------------------------------- var horaActual = (new Date()).getHours(); var imagen = ""; if (horaActual >= horario_inicio["mañana"] && horaActual < horario_inicio["tarde"]) { imagen = imagenes["mañana"]; } else if (horaActual >= horario_inicio["tarde"] && horaActual < horario_inicio["noche"]) { imagen = imagenes["tarde"]; } else if (horaActual >= horario_inicio["noche"] || horaActual < horario_inicio["mañana"]) { imagen = imagenes["noche"]; } str_css_fixed = "scroll"; if (imagen_fija) str_css_fixed = "fixed"; if (imagen_se_repite) { $(selector_css).css("background", "url(" + imagen + ") " + str_css_fixed + " repeat"); } else { $(selector_css).css({ "background-image": "url(" + imagen + ")", "background-repeat": "no-repeat", "background-size": "cover", "background-attachment": str_css_fixed }); } });

Ora andiamo a modificare il codice:

-selector_css dove applicare l'immagine di sfondo. L'impostazione predefinita è il body

-imagen_se_repite possibili valori veri o falsi . Vero se l'immagine è piccola e si ripete nel assi X e Y False se l'immagine è grande e si vuole riempire l'intera linea, partendo dall'alto.

-horario_inicio["mañana"] Indicare l'ora per il mattino (formato 0-24)
-horario_inicio["tarde"] Indicare l'ora d'inizio per il pomeriggio (formato 0-24)
-horario_inicio["noche"] Indicare l'ora d'inizio per la notte (formato 0-24)

-imagenes["mañana"] URL dell'immagine di sfondo per la mattina
-imagenes["tarde"] URL dell'immagine di sfondo per il pomeriggio
-imagenes["noche"] URL dell'immagine di sfondo per la notte

Ora cliccate salvare ed il gioco è fatto :good:

Tutorial creato da: Turbodeif Tradotto da Insane
Copyrigth FORUMATTIVO.COM