begin process at 2010 03 21 20:15:23
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Date & Heure

 > PETITE CLASSE DE TIMERS

PETITE CLASSE DE TIMERS


 Information sur la source

Note :
Aucune note
Catégorie :Date & Heure Classé sous :timer, compte, rebours, décompte, minuteur Niveau :Débutant Date de création :17/04/2007 Date de mise à jour :19/04/2007 16:20:40 Vu / téléchargé :8 997 / 405

Auteur : kankrelune

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note


 Description

Petit code fait rapido ce matin suite à une source postée il y a quelques jours...

http://www.javascriptfr.com/code.aspx?ID =42289

C'est un compte à rebours on ne peut plus basique... plusieurs timer peuvent être instanciés en même temps... une fois le compte à rebours terminé un code est exécuté si ce dernier a été passé en paramètre lors de l'instanciation du timer... ce code peut être passé soit sous la forme d'une chaine à évaluer, soit sous la forme d'une référence vers une fonction ou une méthode soit sous la forme d'un url vers lequel l'internaute sera redirigé... .. .

Source

  • /*
  • * timers objects reference object for global compatibilitie with the setInterval()
  • *
  • * @var _timersObjRef
  • * @access private
  • */
  • var _timersObjRef = {
  • count: 0,
  • obj: new Array
  • };
  • /*
  • * timer class constructor
  • *
  • * @param mixed exec javascript evaluable code or function reference or url (for redirect) executed at the end of the timer
  • * @param str target html contener id
  • * @param int time start value (in seconds)
  • * @param int tempo decrement offset (in seconds)
  • * @param bool noAutoStart disable auto start timer
  • *
  • * @return object
  • * @access public
  • */
  • function timer(exec,target,time,tempo,noAutoStart)
  • {
  • // object attributs initialize
  • this._id = _timersObjRef.count++;
  • this.tempo = (tempo) ? tempo : 1;
  • this.interval = this.tempo*1000;
  • this.time = (time) ? time : 5;
  • this.current = this.time;
  • this.target = (target) ? target : null;
  • this._handle = null;
  • this._exec = null;
  • if(exec)
  • {
  • // we search if the exec var is an url
  • var regex = new RegExp("^((ht|f)tps?:\/\/)?(www\.)?([A-Za-z0-9-_:]+\\.[A-Za-z]{2,4})|([0-9]+\\.[0-9]+\\.[0-9]+\\.[0-9]+(:[0-9]+)?)", "gi");
  • //if it is the exec code is a redirection
  • if (regex.exec(exec) != null)
  • this._exec = 'location.href = "'+exec+'";';
  • else
  • this._exec = exec;
  • }
  • //global object ref for setInterval execution
  • _timersObjRef.obj[this._id] = this;
  • //set the timer html contener value
  • this._setContents();
  • if(!noAutoStart)
  • this.start();
  • }
  • /************************** Publics methods **************************/
  • /*
  • * timer start method
  • *
  • * @return void
  • * @access public
  • */
  • timer.prototype.start = function()
  • {
  • //register the interval... we use the global referenced timer for updating action
  • if(!this._handle)
  • this._handle = setInterval("_timersObjRef.obj["+this._id+"]._update();",this.interval);
  • }
  • /*
  • * timer stop method
  • *
  • * @return void
  • * @access public
  • */
  • timer.prototype.stop = function()
  • {
  • if(this._handle)
  • {
  • clearInterval(this._handle);
  • this._handle = null;
  • }
  • }
  • /*
  • * timer current value reset
  • *
  • * @return void
  • * @access public
  • */
  • timer.prototype.rewind = function()
  • {
  • this.current = this.time;
  • }
  • /*
  • * timer count restart
  • *
  • * @return void
  • * @access public
  • */
  • timer.prototype.restart = function()
  • {
  • this.stop();
  • this.rewind();
  • this.start();
  • }
  • /*
  • * timer time setter
  • *
  • * @param int time start value (in seconds)
  • *
  • * @return void
  • * @access public
  • */
  • timer.prototype.setTime = function(time)
  • {
  • this.time = (time) ? time : 5;
  • }
  • /*
  • * timer tempo setter
  • *
  • * @param int tempo decrement offset (in seconds)
  • *
  • * @return void
  • * @access public
  • */
  • timer.prototype.setTempo = function(tempo)
  • {
  • this.tempo = (tempo) ? tempo : 1;
  • this.interval = this.tempo*1000;
  • }
  • /************************** Privates methods **************************/
  • /*
  • * timer updating
  • *
  • * @return void
  • * @access private
  • */
  • timer.prototype._update = function()
  • {
  • this.current -= this.tempo;
  • if(this.target)
  • this._setContents();
  • if(this.current == 0)
  • {
  • this.stop();
  • if(this._exec)
  • {
  • if(typeof this._exec == "function")
  • this._exec();
  • else
  • eval(this._exec);
  • }
  • }
  • }
  • /*
  • * timer target contener updater
  • *
  • * @return void
  • * @access private
  • */
  • timer.prototype._setContents = function()
  • {
  • var _targetObj;
  • if(document.getElementById)
  • _targetObj = (typeof document.getElementById(this.target) == "object") ? document.getElementById(this.target) : void(0);
  • else if(document.all)
  • _targetObj = (typeof document.all[this.target] == "object") ? document.all[this.target] : void(0);
  • else if(document.layers)
  • _targetObj = (typeof document[this.target] == "object") ? document[this.target] : void(0);
  • if(!_targetObj)
  • return false;
  • // html input ?
  • if(_targetObj.type && _targetObj.type == "text")
  • _targetObj.value = this.current;
  • else
  • _targetObj.innerHTML = this.current;
  • }
/*
* timers objects reference object for global compatibilitie with the setInterval()
*
* @var _timersObjRef
* @access private
*/ 
var _timersObjRef = {
                    count: 0,
                    obj: new Array
                };

/*
* timer class constructor
*
* @param  mixed     exec               javascript evaluable code or function reference or url (for redirect) executed at the end of the timer
* @param  str       target             html contener id
* @param  int       time               start value (in seconds)
* @param  int       tempo              decrement offset (in seconds)
* @param  bool      noAutoStart        disable auto start timer
*
* @return object
* @access public
*/ 
function timer(exec,target,time,tempo,noAutoStart)
{
    // object attributs initialize
    this._id = _timersObjRef.count++;
    this.tempo = (tempo) ? tempo : 1;
    this.interval = this.tempo*1000;
    this.time = (time) ? time : 5;
    this.current = this.time;
    this.target = (target) ? target : null;
    this._handle = null;
    this._exec = null;
    
    if(exec)
    {
        // we search if the exec var is an url
        var regex = new RegExp("^((ht|f)tps?:\/\/)?(www\.)?([A-Za-z0-9-_:]+\\.[A-Za-z]{2,4})|([0-9]+\\.[0-9]+\\.[0-9]+\\.[0-9]+(:[0-9]+)?)", "gi");
        
        //if it is the exec code is a redirection
        if (regex.exec(exec) != null)
            this._exec = 'location.href = "'+exec+'";';
                else 
                    this._exec = exec;
    }
    
    //global object ref for setInterval execution
    _timersObjRef.obj[this._id] = this;
    //set the timer html contener value
    this._setContents();
    
    if(!noAutoStart)
        this.start();
}

/************************** Publics methods **************************/

/*
* timer start method
*
* @return void
* @access public
*/ 
timer.prototype.start = function()
{
    //register the interval... we use the global referenced timer for updating action
    if(!this._handle)
        this._handle = setInterval("_timersObjRef.obj["+this._id+"]._update();",this.interval);
}

/*
* timer stop method
*
* @return void
* @access public
*/ 
timer.prototype.stop = function()
{
    if(this._handle)
    {
        clearInterval(this._handle);
        this._handle = null;
    }
}

/*
* timer current value reset
*
* @return void
* @access public
*/ 
timer.prototype.rewind = function()
{
    this.current = this.time;
}

/*
* timer count restart
*
* @return void
* @access public
*/ 
timer.prototype.restart = function()
{
    this.stop();
    this.rewind();
    this.start();
}

/*
* timer time setter
*
* @param  int          time                    start value (in seconds)
*
* @return void
* @access public
*/ 
timer.prototype.setTime = function(time)
{
    this.time = (time) ? time : 5;
}

/*
* timer tempo setter
*
* @param  int          tempo                 decrement offset (in seconds)
*
* @return void
* @access public
*/ 
timer.prototype.setTempo = function(tempo)
{
    this.tempo = (tempo) ? tempo : 1;
    this.interval = this.tempo*1000;
}


/************************** Privates methods **************************/

/*
* timer updating
*
* @return void
* @access private
*/ 
timer.prototype._update = function()
{    
    this.current -= this.tempo;
    
    if(this.target)
        this._setContents();
    
    if(this.current == 0)
    {
        this.stop();
        
        if(this._exec)
        {
            if(typeof this._exec == "function")
                this._exec();
                    else
                        eval(this._exec);
        }
    }
}

/*
* timer target contener updater
*
* @return void
* @access private
*/ 
timer.prototype._setContents = function()
{
    var _targetObj;

    if(document.getElementById)
        _targetObj = (typeof document.getElementById(this.target) == "object") ? document.getElementById(this.target) : void(0);
            else if(document.all) 
                _targetObj = (typeof document.all[this.target] == "object") ? document.all[this.target] : void(0);
                    else if(document.layers) 
                        _targetObj = (typeof document[this.target] == "object") ? document[this.target] : void(0);
    
    if(!_targetObj)
        return false;
    
    // html input ?
    if(_targetObj.type && _targetObj.type == "text")
        _targetObj.value = this.current;
            else 
                _targetObj.innerHTML = this.current;
}


 Conclusion

La classe est assez simple à utiliser... il y a un exemple assez complet dans le zip... .. .

/*
* @param  mixed     exec             code js à évaluer, référence vers une fonction/méthode ou url pour redirection
* @param  str       target           id du conteneur html
* @param  int       time             temps de départ en secondes (par défaut 5)
* @param  int       tempo            valeur de décrémentation
* @param  bool      noAutoStart      si true le timer ne démarrera pas automatiquement
*/
var monTimer = new timer(exec,target,time,tempo,noAutoStart);

en outre vous disposez de quelques méthodes pour gérer le timer 4 pour le gérer et 2 setter...

- start() pour le lancer s'il n'est pas en mode auto
- stop() pour l'arrêter
- rewind() pour le remettre à sa valeur de début
- restart() on repart depuis le début

- setTime() pour modifier le temps total du timer
- setTempo() pour modifier sont rythme de décrémentation

Voili voilou... aucun bug trouvé hormis le fait, mais ce n'est pas vraiment un bug car c'est dû à javascript lui même, que le rafraichissement des timers (lorsqu'ils sont plusieurs) ne se fait pas seconde par seconde (si le tempo est à 1) mais par (1*nombre de timers) secondes... .. . ;o)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

17 avril 2007 12:22:25 :
Correction du "bug" sur les champs texte lorsque l'attribut value n'existait pas ou était vide... .. .
17 avril 2007 12:49:29 :
Modification de l'expression régulière pour les url et mise à jour du zip
17 avril 2007 13:52:39 :
la dernière après j'arrête... ajout des setters, suppression de la méthode _getContener() un peu superflue vue qu'elle ne sert qu'une fois... modification de l'exemple pour qu'il soit complet... ajout de quelques commentaires (avec mon anglais légendaire lol) dans le code histoire de... .. . @ tchaOo°
17 avril 2007 14:13:17 :
Correction d'une erreur de frappe... intégré la méthode _execute() dans la méthode _update() ça simplifie et clarifie le code et ça fait de la place... .. .
17 avril 2007 14:20:57 :
Comme c'est un code fait à la va vite on trouve toujours des choses à changer... lol... modification de stop(), start() et restart()... cette fois ci ça devrait être bon... .. .
18 avril 2007 02:22:03 :
Correction description du constructeur...
19 avril 2007 16:20:40 :
Ajout d'une version "compactée" sans les commentaires et avec une indentation plus dense ce qui permet de passer de 193 lignes/4.55 ko à 66 lignes/2.37 ko... .. . ;o)

 Sources du même auteur

CHECKUSERACTIVITY : DETECTER L'INACTIVITÉ DU VISITEUR

 Sources de la même categorie

Source avec Zip CHRONOMÈTRE AMÉLIORÉ par Kolosta
Source avec Zip SLEEP() SANS BOUCLE D'ATTENTE CONSOMMATRICE par Phildepantin
Source avec Zip AFFICHAGE DE L'HEURE ET DU FUSEAU HORAIRE (TIMEZONE) SUR LA ... par navylav2
Source avec Zip Source avec une capture HORLOGE TRIPLE AFFICHAGE AU FORMAT AM/PM/24H/DST par sofiane1234
Source avec Zip Source avec une capture HORLOGE NUMÉRIQUE EN JAVASCRIPT, COMPATIBLE IE ET FF par bad_dark_spirit

 Sources en rapport avec celle ci

Source avec Zip ANIMATION LOGO par opossum_farceur
COMPTE À REBOURS POUR ÉVÉNEMENT par CSIBern
Source avec Zip CHRONOMÈTRE MESURANT LA DURÉE D'UNE FONCTION par jesusonline
Source avec Zip MODULE D'ANIMATIONS TEXTE SIMPLE ET PERSONNALISABLE par etiennexxx9
COMPTE À REBOURS AVEC LIEN DE REDIRECTION QUAND IL EST FINI par franco_se

Commentaires et avis

Commentaire de bultez le 17/04/2007 13:05:10

ou saura maintenant où rediriger
( et ce, immédiatement, sans timer )
ceux qui ont des soucis de "compte à rebours".
nickel.                       @+

Commentaire de coucou747 le 19/04/2007 03:00:23

c'est bien commente et bien code, mais 200 lignes juste pour ca, c'est pas un peu ... gros ?

Commentaire de kankrelune le 19/04/2007 15:43:34

Oui sauf que si tu enlève les commentaires notament ceux des méthodes et que tu réduis légèrement l'indentation tu réduit la source de moitié... je vais ajouter une version compactée au zip... .. . ;o)

@ tchaOo°

Commentaire de ralecul le 21/05/2007 19:30:28

Salut,

Perso je pense que si j'ai besoin d'un timer j'aurais plus vite fait dans coder un,
plutôt que d'utiliser une classe aussi générique, mais bon c'est une question de gout ...

Sinon pour ce qui est du code j'ai une modif à proposer :

- Suppression de la variable globale _timersObjRef (qui est inutile)

Et quelques commentaires anecdotiques :

- je trouve ton indentation un peu zarb, la encore question de gout...

if (condition)
traitement
else
autre traitement

au lieu de :

if (condition)
traitement
else
autre traitement

(d'un autre côté je suis pas sur que l'indentation passe une fois postée et comme on peut pas éditer...)

- euh sinon le coup du @acces public / private c'est un peu de la frime, non :-)

Sans prototype (la lib) ou une autre façon de coder je vois pas trop la diff entre tes méthodes publiques et privées...

CODE sans la variable globale :

Suppression de "_timersObjRef"
Suppression de "this._id = _timersObjRef.count++;" dans le constructeur
Remplacement de la méthode start par celle-ci :

timer.prototype.start = function()
{
    var localThis = this;

    //register the interval... we use the global referenced timer for updating action
    if(!this._handle)
        this._handle = setInterval(function() {localThis._update();}, localThis.interval);
}

@+

Commentaire de ralecul le 21/05/2007 19:33:17

Bon ben c'est gagné l'indentation marche pas... désolé...

@+

Commentaire de kankrelune le 10/06/2007 17:24:40

Salut... merci pour ton commentaire... concernant l'indentation c'est une question d'habitude... je prefere...

if(condition)
    action
        else
            alternative

que

if(condition)
    action
else
    alternative

concernant les accès c'est une habitude qui vient des autres langages, notament du php, et ça n'a rien a voir avec de la frime mais juste de bien documenter ses sources pour avoir le plus d'infos en cas de remaniement ultérieur du code et pour ceux qui peuvent être amené à l'utiliser/modifier... il est toujours bon de savoir qu'une methode ou un attribut n'est pas destiné à etre utilisé/manipulé en externe... ça n'est d'ailleur pas valable que pour l'orienté objet... .. .

Sinon pour ce qui est de _timersObjRef je l'ais mis en externe car setInterval() et setTimeout() gètent très mal les référence sur l'objet courant mais je vais tester ta technique histoire de voir... il est clair que si ça marche bien ça sera plus propre... .. . ;o)

@ tchaOo°

Commentaire de PetiteNonne le 29/07/2009 13:47:23

Merci pour ce show de SetTimer. je débute et ce code est comme un tuto pour moi.
Merci merci merci.
bisous.

Commentaire de kankrelune le 29/07/2009 15:17:22

De rien de rien de rien... .. .

Bizkottes

@ tchaOo°

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

compte a rebour space [ par quitues ] Je recherche un compte à rebours, un décompte space car il démarre du chargement de la page et dé kil s'arrête (par ex. dans 5 sec.), le visiteur est compte rebours [ par goutedo ] Bonjour à tous !J'ai un problème tout simple je crois, mais le Javascript et moi on ne s'aime pas beaucoup  et du coup j'avance pas.Bre compte a rebours j h m s a partir de seconde [ par matttt34 ] Salut tout le monde :) J'ai beau chercher partout je n'arrive pas a trouver ce que je cherche : Je souhaiterais avoir un compte a rebours m'affichan Compte a rebours [ par Tilix ] Salut, J'ai trouvé ce petit compte à rebours, mais j'ai besoin de l'améliorer... <SCRIPT LANGUAGE="JavaScript"> <!-- function Redirection avec compte a rebours [ par twinsen60 ] BonjourJ'ai ce code ci :<script language="javascript" type="text/javascript"> <!-- window.location.replace( "http://www.un-site.com/une-pag Compte a rebours [ par ptitdragonvert ] Bonjour,Je cherche un compte a rebours en javascript avec le decompte 'H:M:S' et la possibilité de pouvoir en mettre plusieurs sur une meme page.Moi j Décompte (compte a rebours) qui affiche le nombre de mois, de jour, d'heure, de minutes de seconde qui reste avant un évenement [ par slashf ] salut a tous comme le titre le montre j'ai besoin de créé un compte a rebours qui affiche le nombre de mois, de jour, d'heure, de minutes de seconde q Compte à rebours [ par CSIBern ] Bonjour à tous,Je dois créer un petit site concernant un tournois.Pour ça je comptais insérer un compte à rebours donnant le temps jusqu'à l'événement créer un compte à rebours à l'heure du serveur [ par ajor ] Bonjour à tous,J'aimerais pour mon site, créer un compte à rebours qui fonctionne à l'heure du serveur, afin que tous les client aient exactement le m Compte a rebours pour mon site [ par jim0907 ] Bonjour, Cela fait plusieurs jour que je cherche sur internet un compte a rebours pour mon site, je ne trouve pas du tout ce qu'il me faut alors j'ai


Nos sponsors


Sondage...

Comparez les prix


HTC Magic

Entre 429€ et 429€

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,562 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales