Conto alla rovescia con personalizzazione

Da **Sogniriflessi** Mer 9 Set 2015 - 14:55

Conto alla rovescia con personalizzazione

Questo tutorial consente di personalizzare la visualizzazione del tutorial "Orologio / Conto alla rovescia".

Panoramica

Conto alla rovescia con personalizzazione Tutori10

Preparazione

Eseguire la prima parte del tutorial cioè orologio / Conto alla rovescia senza personalizzazione.

Conto alla rovescia con personalizzazione Tutori10

https://aiuto.forumattivo.it/t18765-conto-alla-rovescia-senza-personalizzazione

Le opzioni di base

L'orologio di base ha già proprietà di formattazione di tempo e il conto alla rovescia, eccoli:

n_j: utilizzati esclusivamente per il conto alla rovescia, questa proprietà è un valore numerico che indica la lunghezza fissa per la visualizzazione dei giorni, per impostazione predefinita questa proprietà è 3 e se si imposta la data di una settimana darà il tempo "007" , è chiaro che ad essa vanno aggiunti gli zeri iniziali per raggiungere la lunghezza di 3 caratteri.
F_C: esclusivamente per la visualizzazione del conto alla rovescia è una stringa di default {j} giorni {h} {m} {s}.
f_H: esclusivamente per la visualizzazione del tempo è una stringa di default{h} {m} {s}.

{h},{m},{s}

Per essere veramente personalizzabile, l'orologio sostituisce il contenuto delle proprietà di visualizzazione (F_C e f_H) e:

{J}: rappresenta i giorni nella loro interezza, se il conto alla rovescia è in una settimana {j} sarà sostituito da 007.
{H}: rappresenta il tempo in pieno, se è 13h24min12s {h} sarà sostituito da 13.
{M}: indica i minuti in pieno, se è 13h24min12s {m} sarà sostituito da 24.
{S}: rappresenta i secondi in pieno, se è 13h24min12s {s} sarà sostituito da 12.

Sono disponibili altre opzioni durante la formattazione , è possibile visualizzare il valore delle ore, minuti, ecc ... per sua natura è molto utile se si desidera utilizzare le immagini per il vostro orologio al posto del testo, Per questo è sufficiente seguire la lettera della posizione del carattere desiderato.
Utilizzando l'esempio precedente, è 13H24min12s:

{} H1 è 1 e h2 {} è 3 come {h} è uguale a 13 e che il primo carattere 13 è 1 e il secondo è tre.

Conto alla rovescia con personalizzazione 997260

Se si richiede una posizione di carattere che non esiste, l'orologio vi avviserà tramite un messaggio che indica l'errore riscontrato, ad esempio non valido: "h3 {}".

Modifica le opzioni

Ok, ora che abbiamo visto le opzioni disponibili, vediamo come modificarle.
Per modificare un'opzione basta semplicemente effettuare le seguenti operazioni:

Codice:: variable.options.option=valeur;

Ecco un esempio in cui si desidera visualizzare le immagini per l'ora:

Codice:: x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />';

Sarà possibile modificare solamente le opzioni poste prima di heure o di a_rebours.
Questo è un esempio di codice valido:

Codice:: $(function(){ var x=new horloge($("#id_horloge")); x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />'; x.heure(); });

questo invece no:

Codice:: $(function(){ var x=new horloge($("#id_horloge")); x.heure(); x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />'; });

Eseguire il codice alla fine del conto alla rovescia

Quando il conto alla rovescia raggiunge lo zero, una funzione viene avviata automaticamente il suo nome è "fin_a_rebours", per default non fa assolutamente nulla, ma è possibile ridefinire così:

Codice:: x.fin_a_rebours=function(){code javascript};

Questa possibilità è prevista per coloro che vogliono cambiare lo sfondo del loro forum, quando il conto alla rovescia è terminato, per esempio, Conto alla rovescia con personalizzazione Icon_wink