JavaScript

Javascript

Créer un compte à rebours

Compte à rebours affichant le temps en 10ème de seconde.

Partie soit à insérer dans le fichier html directement (à l'intérieur des balises head) en copiant le code ci-dessous

<script>

nav = navigator.appVersion.substring(0,3);

function CalculHeure(){

Maintenant = new Date;

TempMaintenant = Maintenant.getTime();

Future = new Date(2012, 11, 21);/* le 2ème nombre représente la valeur du moins soustrait par 1 (on commence donc par 0) */

TempFuture = Future.getTime();

zero = ""; DinaHeure = Math.floor((TempFuture-TempMaintenant)/1000); /* millième de seconde / 1000 */

DinaHeure = "" + DinaHeure;

if (DinaHeure <= 0){

DinaHeure = "0";

}

longe = DinaHeure.length;

difflonge = 12-longe;

i = 1;

while (i <= difflonge){

DinaHeure = "0"+DinaHeure;

i++;

}

return;

}

CalculHeure();

if (nav >= 4){

i0 = new Image;

i1 = new Image;

i2 = new Image;

i3 = new Image;

i4 = new Image;

i5 = new Image;

i6 = new Image;

i7 = new Image;

i8 = new Image;

i9 = new Image;

imgSrc = new Array;

imgSrc[0] = 'images/h0.gif';

imgSrc[1] = 'images/h1.gif';

imgSrc[2] = 'images/h2.gif';

imgSrc[3] = 'images/h3.gif';

imgSrc[4] = 'images/h4.gif';

imgSrc[5] = 'images/h5.gif';

imgSrc[6] = 'images/h6.gif';

imgSrc[7] = 'images/h7.gif';

imgSrc[8] = 'images/h8.gif';

imgSrc[9] = 'images/h9.gif';

i0.src = imgSrc[0];

i1.src = imgSrc[1];

i2.src = imgSrc[2];

i3.src = imgSrc[3];

i4.src = imgSrc[4];

i5.src = imgSrc[5];

i6.src = imgSrc[6];

i7.src = imgSrc[7];

i8.src = imgSrc[8];

i9.src = imgSrc[9];

}

function Rebour(){

if (nav >= 4){

CalculHeure()

char1 = DinaHeure.charAt(0);

document.heure1.src = imgSrc[char1];

char2 = DinaHeure.charAt(1);

document.heure2.src = imgSrc[char2];

char3 = DinaHeure.charAt(2);

document.heure3.src = imgSrc[char3];

char4 = DinaHeure.charAt(3);

document.heure4.src = imgSrc[char4];

char5 = DinaHeure.charAt(4);

document.heure5.src = imgSrc[char5];

char6 = DinaHeure.charAt(5);

document.heure6.src = imgSrc[char6];

char7 = DinaHeure.charAt(6);

document.heure7.src = imgSrc[char7];

char8 = DinaHeure.charAt(7);

document.heure8.src = imgSrc[char8];

char9 = DinaHeure.charAt(8);

document.heure9.src = imgSrc[char9];

char10 = DinaHeure.charAt(9);

document.heure10.src = imgSrc[char10];

char11 = DinaHeure.charAt(10);

document.heure11.src = imgSrc[char11];

char12 = DinaHeure.charAt(11);

document.heure12.src = imgSrc[char12];

char13 = DinaHeure.charAt(12);

}

temporebour = setTimeout("Rebour()", 1000) /* délai avant chaque refresh */

}

window.onload=Rebour;

</script>

Ce code peut être mis dans un fichier .js (javascript), il suffit alors de mettre script src="chemin_du_fichier_js" entre les balises head.

Ensuite dans la partie body de votre fichier html rajoutez ce code pour afficher le compte à rebours :

<IMG SRC="images/h' + DinaHeure.charAt(0) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure1"><IMG SRC="images/h' + DinaHeure.charAt(1) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure2"><IMG SRC="images/h' + DinaHeure.charAt(2) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure3"><IMG SRC="images/h' + DinaHeure.charAt(3) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure4"><IMG SRC="images/h' + DinaHeure.charAt(4) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure5"><IMG SRC="images/h' + DinaHeure.charAt(5) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure6"><IMG SRC="images/h' + DinaHeure.charAt(6) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure7"><IMG SRC="images/h' + DinaHeure.charAt(7) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure8"><IMG SRC="images/h' + DinaHeure.charAt(8) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure9"><IMG SRC="images/h' + DinaHeure.charAt(9) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure10"><IMG SRC="images/h' + DinaHeure.charAt(10) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure11"><IMG SRC="images/h' + DinaHeure.charAt(11) + '.gif" BORDER=0 WIDTH=12 HEIGHT=15 NAME="heure12">

Enfin, il faudra télécharger les images (chaque image représente un chiffre) : Télécharger les images

Attention le répertoire devra impérativement se nommer images.

Code inspiré d'un script sur le site editeurjavascript