Un ptit compte a rebour

par **Cyrano** » 03 mars 2006, 21:28

Si ça résoud ton problème, n'oublie pas de l'indiquer

[Résolu]

par **Tux1** » 03 mars 2006, 20:01

Merci

par **Cyrano** » 03 mars 2006, 01:10

lol, j'allais proposer quelque chose de beaucoup plus simpliste : enfin bon, je le mets quand même : le seul paramètre à ajuster, c'est la durée en econde en paramètre de l'appel de fonction dans l'évènement onload de la balise <body> :

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Comte à rebours en JavaScript</title>
<script type="text/javascript">
/* <![CDATA[ */
/**
 * Fonction qui va afficher le compte à rebours
 * @param Int duree : durée en minute que doit avoir le décompte au départ
 */
function compteARebours(duree)
{
    var delai = 1000;  // délai entre deux changements d'affichage en miliseconde
    var resteMinutes = Math.floor(duree / 60);
    var resteSecondes = duree - (resteMinutes * 60);
    resteSecondes = (resteSecondes < 10) ? '0'+ resteSecondes : resteSecondes;
    var reste = 'Il reste '+ resteMinutes +'mn '+ resteSecondes +'s';
    document.getElementById('comptearebours').innerHTML = reste;
    duree--;
    setTimeout('compteARebours('+ duree +')', delai);
}
/* ]]> */
</script>
</head>
<body onload="setTimeout('compteARebours(600)', 1000);">
<p id="comptearebours"></p>
</body>
</html>

par **naholyr** » 03 mars 2006, 00:45

Comme je suis dans ma période Javascript, et puisque tu ne sembles pas disposé à vouloir faire beaucoup d'efforts de recherche, voici un objet bien propre pour faire un chrono. Je te laisse comprendre par toi-même comment ça fonctionne.

La classe "Chrono" :

Code : Tout sélectionner

var ChronoInstances = new Array(); // need a global pointer for setInterval

function Chrono (startValue, stopValue, step, intervalms, layerID) {

    // -- Public attributes --
    this.startValue = null;
    this.stopValue = null;
    this.step = null;
    this.currentValue = null;
    this.layerID = null
    this.interval = null;
    this.running = null;
    
    // -- Constructor and private attributes --
    this._layer = new Array();
    this._intervalHandler = null;
    this.startValue = startValue!=null ? startValue : 0;
    this.step = step ? step : 1;
    this.stopValue = stopValue!=null ? stopValue : this.startValue-this.step;
    this.interval = intervalms ? intervalms : 1000; // milliseconds
    this.running = false;
    this.layerID = layerID;
    // generate random ID to have a public function pointer to this.tick
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    while (true) {
        for (var i=0; i<5; i++) {
            var rnum = Math.floor(Math.random() * chars.length);
            randomstring += chars.substring(rnum,rnum+1);
        }
        if (!ChronoInstances[randomstring]) {
            this._randomID = randomstring;
            ChronoInstances[this._randomID] = this;
            break;
        }
    }

}

Chrono.prototype.start = function () {
    if (!this.running) {
        this.running = true;
        this.currentValue = this.startValue;
        this.onStart();
        this.unpause();
    }
}

Chrono.prototype.restart = Chrono.prototype.start; // alias

Chrono.prototype.unpause = function () { // start without reset value, "onStart" event not triggered
    this.running = true;
    this._intervalHandler = setInterval("ChronoInstances[\""+this._randomID+"\"].tick();", this.interval);
    this.tick();
}

Chrono.prototype.tick = function () {
    if (this.running) {
        if ( (this.step>0 && this.stopValue>this.startValue && this.currentValue>=this.stopValue) || (this.step<0 && this.stopValue<this.startValue && this.currentValue<=this.stopValue) ) {
            this.stop();
        }
        else {
            this.onTick();
            this.writeToLayer(this.toString());
            this.currentValue += this.step;
        }
    }
}

Chrono.prototype.stop = function () {
    this.pause();
    this.onStop();
}

Chrono.prototype.pause = function () { // stop, "onStop" event not triggered
    this.running = false;
    clearInterval(this._intervalHandler);
}

Chrono.prototype.writeToLayer = function (str) {
    if (this.layerID) {
        if (!this._layer[this.layerID])
            this._layer[this.layerID] = document.getElementById(this.layerID);
        this._layer[this.layerID].innerHTML = str;
    }
}

// -- override to customize

Chrono.prototype.onTick = function () { }

Chrono.prototype.onStop = function () { }

Chrono.prototype.onStart = function () { }

Chrono.prototype.toString = function () { return this.currentValue; }

Deux exemples d'utilisation :

Code : Tout sélectionner

<html>
<head>
<style type="text/css">
#chrono1, #chrono2 {
    display: block;
    width: 300px;
    height: 25px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 20px;
    text-align: center;
}
#log {
    display: block;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    overflow: auto;
}
</style>

<script src="chrono.js"></script>

<!-- Mon chrono personnalisй -->
<script>
function doLog(str) {
    var d = document.getElementById("log");
    d.innerHTML = str+"<br>"+d.innerHTML;
}

var c1 = new Chrono(0, 2000, 1, 100, "chrono1");
c1.toString = function() {
    var v = this.currentValue;
    v = Math.floor(v/10);
    var s = v%60;
    v = Math.floor(v/60);
    var m = v%60;
    v = Math.floor(v/60);
    var h = v%24;
    v = Math.floor(v/24);
    var j = v;
    var str = (j>0?j+'j':'')+(h>0?h+'h':'')+(m>0?m+'m':'')+(s>0?s+'s':'');
    return str ? str : "0s";
}
c1.onTick = function () { doLog("tick! current value = "+this.currentValue); }
c1.onStart = function () { doLog("start : from "+this.startValue+" to "+this.stopValue+" by "+this.step); }
c1.onStop = function () { doLog("<b>stop! final value = "+this.currentValue+"</b>"); }
</script>

<!-- Mon second chrono -->
<script>
var c2 = new Chrono(10, 0, -1, 1000, "chrono2");
c2.onStop = function () { this.writeToLayer("BOUM !"); }
</script>

</head>
<body>
<fieldset>
<legend><strong>Chrono 1 (loggй) : 0 а 2000, interval = 1/10s</strong></legend>
<p>Clic = pause/continue. Double-clic = stop/start.</p>
<a href="#" ondblclick="if (c1.running) c1.stop(); else c1.start();" onclick="if (c1.running) c1.pause(); else c1.unpause();" id="chrono1">Lancer/arrкter le chrono</a>
<div id="log"></div>
</fieldset>
<fieldset>
<legend><strong>Chrono 2 (comptes а rebours) : 10 а 0, interval = 1s</strong></legend>
<a href="#" onclick="c2.start()" id="chrono2">Lancer le compte а rebours</a>
</body>
</html>

par **Tux1** » 02 mars 2006, 22:46

Je veux un truc qui affiche un compte a rebour tous bete

Mais ca c'est pas bon dsl

En plus je sais pas comment modifier le temps et afficher le temps

par **albat** » 01 mars 2006, 21:44

En quoi ce script ne convient-il pas ?
Que recherches-tu ?

par **Tux1** » 01 mars 2006, 19:55

C'est pas ca mais merci comme meme

par **heddicmi** » 28 févr. 2006, 12:42

En charchant quelques secondes : http://www.toutjavascript.com/reference ... hp?iref=13

par **Tux1** » 27 févr. 2006, 18:09

Bonjour,
Je cherche un compte a rebour ou je peux modifier le time
et des que le décompte est fini
c'affiche un ptit truc..

c tou merci

Un ptit compte a rebour

Répondre

Étendre la vue Revue du sujet : Un ptit compte a rebour

Re: Un ptit compte a rebour

Un ptit compte a rebour