Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Compte a rebours

Compte a rebours

20 réponses
Avatar
ptitdragon
Bonjour a tous,

Voila mon probl=E8me:
Je voudrais avoir un compte a rebours en javascript ou je pourrais
mettre le temps restant et que le compteur fasse un decompte jusqu a
0.
Et je voudrais pouvoir en mettre plusieurs sur ma page.

Mais je ne sais pas comment faire.

Aidez moi svp !
Merci d'avance !
A bientot !
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Dr J R Stockton
En fr.comp.lang.javascript message <47853a62$0$875$
fr>, 9 Jan 2008 22:19:30, SAM
d> a ecrit:

var minutes=Math.floor(nbSeconds/60);
var secondes=nbSeconds % 60;


K_ = 150000

var X3333, M, H, D, T
D0_ = new Date()
Q_ = K_ ; while (Q_--) { } // sur-tete (?)
D1_ = new Date()
Q_ = K_ ; while (Q_--) { M = Math.floor(X/60) ; S = X % 60 } // votre
D2_ = new Date()
Q_ = K_ ; while (Q_--) { S = X % 60 ; M = (X-S) / 60 } // plus court
D3_ = new Date()
Q_ = [D1_-D0_, D2_-D1_, D3_-D2_] // Demo 6

P4/3G XP sp2, millisecondes
IE 6 Q_ = [47,469,266]
FF 2 Q_ = [328,1531,1079]
Op 9 Q_ = [63,344,218]
moins vite ^ ^ plus vite

C'est une bonne idée de lire le newsgroup clj et sa FAQ. Voir ci-dessous.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Avatar
SAM
Ah non !
Juste un petit problème ...
Je voudrais la possibilité d'en lancer plusieurs dans la page...


et la marmotte ?

Si ce serais possible...
Merci !


<html>
<script type="text/javascript">
function convert_s_to_jhms(nbSeconds) {
var minutes=Math.floor(nbSeconds/60);
var secondes=nbSeconds % 60;
var heures=Math.floor(minutes/60);
minutes = minutes % 60;
var jours=Math.floor(heures/24);
heures=heures % 24;
return ''+jours+'j '+heures+'h '+minutes+'m '+secondes+'s';
}
function decompte(calque, timer) {
timer--;
document.getElementById(calque).getElementsByTagName('span')[0].innerHTML=convert_s_to_jhms(timer);
if(timer>0) setTimeout(function(){decompte(calque,timer);},1000);
else {
document.getElementById(calque).innerHTML = 'GAGNÉ !';
document.getElementById(calque).className = 'fin';
}
}
</script>
<style type="text/css">
h1 { text-decoration: underline upperline }
.rebours { text-align: center }
.rebours span { color: red }
.fin { font-size: 500% }
</style>
<body onload="
decompte('compt_1',65);
decompte('compt_2',165);
decompte('compt_3',25);">
<h1>Exemples de comptes à rebours</h1>
<h2 id="compt_1" class="rebours">
Compte à rebours 1<br>
il reste : <span>1 minute 5 secondes</span></h2>
<h2 id="compt_2" class="rebours">
Compte à rebours 2<br>
il reste : <span>2 minutes 45 secondes</span></h2>
<h2 id="compt_3" class="rebours">
Compte à rebours 3<br>
il reste : <span>25 secondes</span></h2>
</html>


pas testé !
y peut y avoir des coquilles ...

De plus, probable que ce ne sera pas exact, le truc se relance lui-même
toutes les secondes mais il lui faut un chouia de temps pour
réfléchir/réagir et tout ça multiplié par le nombre de compteurs va
d'autant allonger cette seconde.

Il vaudrait mieux passer par un truc demandant la date (de l'horloge de
l'ordi) et corriger au mieux à chaque seconde.

--
sm

Avatar
SAM
En fr.comp.lang.javascript message <47853a62$0$875$
fr>, 9 Jan 2008 22:19:30, SAM
d> a ecrit:


Hello doc,

var minutes=Math.floor(nbSeconds/60);
var secondes=nbSeconds % 60;


K_ = 150000

var X3333, M, H, D, T
D0_ = new Date()
Q_ = K_ ; while (Q_--) { } // sur-tete (?)
D1_ = new Date()
Q_ = K_ ; while (Q_--) { M = Math.floor(X/60) ; S = X % 60 } // votre
D2_ = new Date()
Q_ = K_ ; while (Q_--) { S = X % 60 ; M = (X-S) / 60 } // plus court
D3_ = new Date()
Q_ = [D1_-D0_, D2_-D1_, D3_-D2_] // Demo 6

P4/3G XP sp2, millisecondes
IE 6 Q_ = [47,469,266]


IE 5.2 93 | 585 | 438 (iMac 2,16Ghz Intel duo-core)

FF 2 Q_ = [328,1531,1079]


244 | 1244 | 911

Op 9 Q_ = [63,344,218]


71 | 509 | 611

moins vite ^ ^ plus vite


Arrrggghhh!
on perd de 2 à 15 dixièmes de seconde toutes les 2 minutes 30
soit environ 1 minute 55 à 14 minutes 24 toutes les 24 heures
(about 1mn55s to 14mn14s are lost each 24 hours)


C'est une bonne idée de lire le newsgroup clj et sa FAQ. Voir ci-dessous.


C'est difficile, c'est pas en français ...


Avatar
ptitdragon
Merci pour ce code !
Il marche a merveille !

Mon probleme maintenant c de convertir une date " yyyy/mm/dd hh-mm-ss
" en secondes
(L'heure est recu par une fonction PHP)

Donc je voulé savoir si je devé rester sur ce groupe ou aller sur
celui pour PHP ?
Sinon il faut que je fasse comment ?
Moi mes essais ressorte un mauvais chrono ...

Merci a tous !
A+
Avatar
Olivier Miakinen

Mon probleme maintenant c de convertir une date " yyyy/mm/dd hh-mm-ss
" en secondes
(L'heure est recu par une fonction PHP)


"yyyy/mm/dd hh-mm-ss".split(/[/ -]/) devrait te retourner un tableau
contenant ("yyyy", "mm", "dd", "hh", "mm", "ss"). Il suffit alors
d'utiliser l'objet Date() pour faire la conversion en secondes.

Avatar
Dr J R Stockton
En fr.comp.lang.javascript , 22 Jan 2008 00:01:13,

Mon probleme maintenant c de convertir une date " yyyy/mm/dd hh-mm-ss
" en secondes
(L'heure est recu par une fonction PHP)


"yyyy/mm/dd hh-mm-ss".split(/[/ -]/) devrait te retourner un tableau
contenant ("yyyy", "mm", "dd", "hh", "mm", "ss"). Il suffit alors
d'utiliser l'objet Date() pour faire la conversion en secondes.


D = new Date( "yyyy/mm/dd hh-mm-ss".replace(/-/g, ":") ) // Objet Date
T = D/1000 // secondes apres 1970.0 UT

"yyyy/mm/dd hh-mm-ss" est l'heure locale.
S'il faut, ajoutez + " GMT" .

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.


Avatar
ptitdragon
Je n y arrive pas ... je dois etre trop nul pour ca ....
est que je pourrais avoir un exemple avec une vrai date ? SVP
ou alors un fonction qui me permeterais de recupperer le tout en
secondes...
Merci d'avance a tous !
A+
Avatar
Olivier Miakinen

D = new Date( "yyyy/mm/dd hh-mm-ss".replace(/-/g, ":") ) // Objet Date


C'est sûr ? La référence ECMAScript dit qu'un constructeur Date avec
un paramètre string l'interprète comme le fait Date.parse(), mais je
n'arrive pas à trouver dans la référence ce que fait exactement parse().
Et sur fr.selfhtml.org je trouve des syntaxes différentes pour le
constructeur et pour parse(), toutes deux différentes de la syntaxe
ci-dessus (laquelle est année mois jour) :

http://fr.selfhtml.org/javascript/objets/date.htm#generalites
nom_objet = new Date("mois jour, annee heures:minutes:secondes");
--> mois jour année

http://fr.selfhtml.org/javascript/objets/date.htm#parse
var trente_ans = Date.parse("Tue, 1 Jan 2000 00:00:00 GMT");
--> jour mois année

Avatar
Olivier Miakinen
Le 22/01/2008 23:23, je répondais à Dr J R Stockton :

D = new Date( "yyyy/mm/dd hh-mm-ss".replace(/-/g, ":") ) // Objet Date


C'est sûr ? La référence ECMAScript dit qu'un constructeur Date avec
un paramètre string l'interprète comme le fait Date.parse(), mais je
n'arrive pas à trouver dans la référence ce que fait exactement parse().


Ah, j'ai trouvé un truc, mais ce n'est guère encourageant :

<cit.>
15.9.5.2 Date.prototype.toString()
This function returns a string value. The contents of the string are
implementation-dependent, but are intended to represent the Date in the
current time zone in a convenient, human-readable form.
NOTE It is intended that for any Date value d, the result of
Date.prototype.parse(d.toString()) (15.9.4.2) is equal to d.
</cit.>

Si j'ai bien tout compris, le format n'est absolument pas défini, la
principale contrainte étant que Date reconnaisse à la relecture le
format qu'il a lui-même généré (ce qui est quand même, avouons-le, la
moindre des choses)


Avatar
Dr J R Stockton
En fr.comp.lang.javascript <47966c9b$, le 22 Jan 2008

D = new Date( "yyyy/mm/dd hh-mm-ss".replace(/-/g, ":") ) // Objet Date


C'est sûr ?


C'est vrai; mais ce n'est pas sûr (la référence ISO/IEC 16262 ne le dit
exactement).

J'ai ecrivé pour quelques annees qu'on peut ecrire
new Date("yyyy/mm/dd") et personne ne m'a ecrit au contraire.

Ca marche en MS IE 4, IE 6, IE 7, Opera 9, Firefox 2, Safari 3 (i.e.
tous les browsers JavaScripts que j'ai essaye); et aussi sous WSH avec
CSCRIPT et WSCRIPT.


Mais on peut aussi ecrire

D = new Date( "1111/02/03 04-05-06".replace(/-/g, ":")
.replace(/(....)/(.....)/, "$2/$1") ) // -> AD 1111 Fevrier 3eme.

parce-qu'il faut absolument que aujour-d'hui est donné par
new Date("01/23/2008")
Si ce n'etait comme ça, il seraient terrible. épouvantable, abominable,
catastrophique pour les Americains ...

(Merci, Ô Druide Panoramix, pour les mots biens!).

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6.
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.


1 2