Développer un compte à rebours

**Olivier Regnier** · 26/02/2009, 09h00

Bonjour

L'équipe OpenBSD met à notre disposition tous les six mois une nouvelle version à savoir le 1er Novembre et le 1er Mai.

Je souhaite développer un compte à rebours comme dans l'exemple ci-dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
01.19.40.30
 days    hours   minutes seconds

      OpenBSD 4.5-RELEASE
          MAY,01,2009

et 2 jours après la sortie on redémarre pour la version suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
50.25.12.20
 days    hours   minutes seconds

      OpenBSD 4.6-RELEASE
        FEBRUARY,01,2009

Avez-vous une petite idée ? Un exemple ?

Merci d'avance de vos réponses

**Olivier Regnier** · 26/02/2009, 09h59

Bien bien bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="temps"></div>
<script type="text/JavaScript">
var Affiche=document.getElementById("temps");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("May 1 00:00:00 2009");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = " " + j + " . " + h + " . " + mn + " . " + sec + "<br/>Days  Hours  Minutes  Seconds";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Voici l'affichage:
65 . 13 . 0 . 35
Days Hours Minutes Seconds

Ce n'est pas très beau

De plus, je suis obligé de fixer la date à chaque fois

Une idée?

Merki

**el_pedro** · 26/02/2009, 11h26

Voila qui est fait, à toi de mettre en forme maintenant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<span id="jour"></span>-<span id="heure"></span>-<span id="minute"></span>-<span id="seconde"></span>
<script language="javascript">
 
	function chrono(){
 
		var now = new Date(); //Date actuelle
		var dat;
 
		if((now.getMonth() >= 3) && (now.getMonth() < 10)){	//Si entre 01/05 et 01/11
 
			dat = new Date(now.getFullYear(), 10, 1);	//Novembre année en cour
 
		}else{
 
			if(now.getMonth() >= 11){	//Si après 01/11
 
				dat = new Date(now.getFullYear()+1, 4, 1); //Mai année suivante
 
			}else{ //Sinon
 
				dat = new Date(now.getFullYear(), 4, 1); //Mai année en cour
 
			}
 
		}
 
		var dif = (dat.getTime() - now.getTime())/1000;	//Dif = nombre de seconde entre maintenant et prochaine date de sortie
		var tab = dif.toString().split('.');
		dif = tab[0];
 
		tab = (dif / 86400).toString().split('.');	//On récupère le nombre de jours
		var jour = tab[0];
		dif = dif - (jour * 86400);
 
		tab = (dif / 3600).toString().split('.');	//On récupère le nombre de heurs
		var heure = tab[0];
		dif = dif - (heure * 3600);
 
		tab = (dif / 60).toString().split('.');		//On récupère le nombre de minutes
		var minute = tab[0];
		var seconde = dif - (minute * 60);			//On récupère le nombre de secondes
 
		document.getElementById('jour').innerHTML = jour;
 
		document.getElementById('heure').innerHTML = heure;
 
		document.getElementById('minute').innerHTML = minute;
 
		document.getElementById('seconde').innerHTML = seconde;
 
		setTimeout("chrono()", 1000);	//On appel toutes les secondes
 
	}
 
	chrono()
 
</script>

Du moment qu'ils ne changes pas leurs jours de sorties, le code devrai être toujours valable.

**Olivier Regnier** · 26/02/2009, 23h26

Bonjour

Déjà un grand merci à toi ce code est nickel

J'ai juste deux points à régler.

J'aimerai modifier le format de la date afin d'obtenir 2 chiffres par exemple, s'il reste 1 jour et 1 heure 5 minutes et 2 secondes d'obtenir:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

01-01-05-02

Le second point c'est de modifier dynamiquement le n° de version. Actuellement, OpenBSD a sorti la version 4.4 (le 1er Novembre 2008) donc au mois de mai, ce sera la 4.5 et ainsi de suite. Sous le compte à rebours, je vais afficher OpenBSD x.x-RELEASE.

Une petite idée ?

Merci beaucoup

**el_pedro** · 27/02/2009, 09h31

Le probleme avec la version, c'est comment on peut savoir, by code j'entend, quand la version passe à 5, la faire defiller 4.04 4.05 4.06 4.07 4.08 4.09, ok mais ensuite, 5 ou 4.10

**Olivier Regnier** · 27/02/2009, 09h41

Les versions sont toujours mentionnées comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 5.0 5.1 etc ...

Serait-ce plus simple ?

1 chiffre après la virgule

**el_pedro** · 27/02/2009, 10h04

Bien chef :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<center> 
	<span id="jour"></span>-<span id="heure"></span>-<span id="minute"></span>-<span id="seconde"></span>
	<br />
	<span id="date"></span>
	<br />
	<span id="version"></span>
<center>
<script language="javascript">
 
	function chrono(){
 
		var now = new Date(); //Date actuelle
		var dat;
		var month = Array('January','February','March','April','May','June','July','August','September','October','November','December');	//Tableau pour affiche des mois
 
		if((now.getMonth() >= 3) && (now.getMonth() < 10)){	//Si entre 01/05 et 01/11
 
			dat = new Date(now.getFullYear(), 10, 1);	//Novembre année en cour
 
		}else{
 
			if(now.getMonth() >= 11){	//Si après 01/11
 
				dat = new Date(now.getFullYear()+1, 4, 1); //Mai année suivante
 
			}else{ //Sinon
 
				dat = new Date(now.getFullYear(), 4, 1); //Mai année en cour
 
			}
 
		}
 
		var version = 43+((dat.getFullYear() - 2008)*2);	//Calcul de la version
 
		if(dat.getMonth() == 11){	//Version suivante si mois de novembre
			version = version - 1;
		}
 
		var dif = (dat.getTime() - now.getTime())/1000;	//Dif = nombre de seconde entre maintenant et prochaine date de sortie
		var tab = dif.toString().split('.');
		dif = tab[0];
 
		tab = (dif / 86400).toString().split('.');	//On récupère le nombre de jours
		var jour = tab[0];
		dif = dif - (jour * 86400);
 
		tab = (dif / 3600).toString().split('.');	//On récupère le nombre de heurs
		var heure = tab[0];
		dif = dif - (heure * 3600);
 
		tab = (dif / 60).toString().split('.');		//On récupère le nombre de minutes
		var minute = tab[0];
		var seconde = dif - (minute * 60);			//On récupère le nombre de secondes
 
		if(jour < 10){jour="0"+jour.toString();}	//On met au format 00-00-00-00
		if(heure < 10){heure="0"+heure.toString();}
		if(minute < 10){minute="0"+minute.toString();}
		if(seconde < 10){seconde="0"+seconde.toString();}
 
		document.getElementById('jour').innerHTML = jour;	//Affiche du décompte
		document.getElementById('heure').innerHTML = heure;
		document.getElementById('minute').innerHTML = minute;
		document.getElementById('seconde').innerHTML = seconde;
 
		document.getElementById('date').innerHTML = month[dat.getMonth()]+", "+dat.getDate()+", "+dat.getFullYear();	//Affichage de la date
 
		document.getElementById('version').innerHTML = "OpenBSD "+(version/10)+"-RELEASE";	//Affichage de la version
 
		setTimeout("chrono()", 1000);	//On appel toutes les secondes
 
	}
 
	chrono()
 
</script>

**Olivier Regnier** · 27/02/2009, 10h11

Je ne suis pas quoi dire à part

Je ne suis pas un adepte du Javascript voir pas du tout

Merci, merci et encore merci

**el_pedro** · 27/02/2009, 10h14

Ce fut un plaisir

**dragonno** · 28/02/2009, 22h15

très beau^^
Je suis pas un fortiche non plus, mais ton site vaut mieux le prévoir pour le futur et ne pas mettre de balises "center" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<center>

**Olivier Regnier** · 01/03/2009, 00h02

Oups, i have a question

Je souhaite intégrer le code suivant dans le script lui-même:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    <span id="jour"></span>-<span id="heure"></span>-<span id="minute"></span>-<span id="seconde"></span>
    <br />
    <span id="date"></span>
    <br />
    <span id="version"></span>

Est-ce possible ensuite, dans ma feuille HTML via un div d'afficher le résultat ?

Merki

**dragonno** · 01/03/2009, 00h07

Oui tu peux mettre ton dernier code HTML dans un script javascript comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.write('<span id="jour"></span>-<span id="heure"></span>-<span id="minute"></span>-<span id="seconde"></span>
    <br />
    <span id="date"></span>
    <br />
    <span id="version"></span>');

Mais à condition que cette partie de code soit lancée de l'intérieur de la page, je veux dire entre <body> et </body>
Si tu l'appelle d'ailleurs, ta page sera remplacée par le contenu de ce code.

Faut voir comment adapter ça^^

Ha mais ça va, d'après la derniere réponse de El pedro c'est apparemment un code déjà prévu pour se lancer dans l'intérieur du body donc pas de problèmes^^

Je comprend pas par contre ta dernière question, puisque ce code affiche déjà un résultat non ?

**Olivier Regnier** · 01/03/2009, 22h47

Bonjour

Voici le code du compte à rebours qui fonctionne à merveille:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function countdown()
{
    var now = new Date();
    var dat;
    var month = Array('JANUARY','FEBRUARY','MARCH','APRIL','MAY','JUNE','JULY','AUGUST','SEPTEMBER','OCTOBER','NOVEMBER','DECEMBER');
 
    if((now.getMonth() >= 3) && (now.getMonth() < 10))
    {
        dat = new Date(now.getFullYear(), 10, 1);
    } 
    else
    {
        if(now.getMonth() >= 11)
        {
            dat = new Date(now.getFullYear()+1, 4, 1);
        } 
        else
        {
            dat = new Date(now.getFullYear(), 4, 1);
        }
    }
 
    var version = 43+((dat.getFullYear() - 2008)*2);
 
    if(dat.getMonth() == 11)
    {
        version = version - 1;
    }
 
    var dif = (dat.getTime() - now.getTime())/1000;
    var tab = dif.toString().split('.');
    dif = tab[0];
 
    tab = (dif / 86400).toString().split('.');
    var days = tab[0];
    dif = dif - (days * 86400);
 
    tab = (dif / 3600).toString().split('.');
    var hours = tab[0];
    dif = dif - (hours * 3600);
 
    tab = (dif / 60).toString().split('.');
    var minutes = tab[0];
    var seconds = dif - (minutes * 60);
 
    if(days < 10){days="0"+days.toString();}
    if(hours < 10){hours="0"+hours.toString();}
    if(minutes < 10){minutes="0"+minutes.toString();}
    if(seconds < 10){seconds="0"+seconds.toString();}
 
    document.getElementById('days').innerHTML = days;
    document.getElementById('hours').innerHTML = hours;
    document.getElementById('minutes').innerHTML = minutes;
    document.getElementById('seconds').innerHTML = seconds;
 
    document.getElementById('date').innerHTML = month[dat.getMonth()]+", "+dat.getDate()+", "+dat.getFullYear();
    document.getElementById('version').innerHTML = "OpenBSD "+(version/10)+"-RELEASE";
    setTimeout("countdown()", 1000);
}

Ma page HTML ressemble à:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

60 .  00 . 14 . 23

Voici son code source:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<ul id="timer"><li id="days"></li> . <li id="hours"></li> . <li id="minutes"></li> . <li id="seconds"></li></ul>

Ma page n'est pas valide xhtml car les points de séparation ne devraient pas se trouver à cet endroit. Est-il possible d'insérer ces fameux points dans le script lui-même ?

Merki

**dragonno** · 01/03/2009, 23h22

regarde si c'est pas possible de les mettre là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<li id="days">.</li>
<li id="hours">.</li>
<li id="minutes">.</li>
<li id="seconds">.</li>

car je me souviens plus de cette balise :/

**Olivier Regnier** · 01/03/2009, 23h25

Envoyé par dragonno

regarde si c'est pas possible de les mettre là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<li id="days">.</li>
<li id="hours">.</li>

car je me souviens plus de cette balise :/

Si je place cela ici, le script ne m'affiche plus le nombre de jours restant etc

**dragonno** · 01/03/2009, 23h27

Fais ça alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
document.getElementById('days').innerHTML = days+".";
document.getElementById('hours').innerHTML = hours+".";
document.getElementById('minutes').innerHTML = minutes+".";
document.getElementById('seconds').innerHTML = seconds;

**Olivier Regnier** · 01/03/2009, 23h31

Merki

**dragonno** · 01/03/2009, 23h33

De rien

Développer un compte à rebours

JavaScript

Discussions similaires

Partager

Partager