Tuto JS - #16 Manipuler le temps en JavaScript

PrimFX Boris ('PrimFX') Le 14 novembre 2018

 

Je vous propose aujourd'hui de découvrir l'objet Date ainsi que les fonctions setInterval et setTimeout très pratiques en JavaScript.

 

Code du tuto :

  • index.html
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>TUTO JS - #16 Manipuler le temps en JavaScript</title>
    	<link href="css/style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    
    
    <h1>TUTO JS - #16 Manipuler le temps en JavaScript</h1>
    
    <p>Il est actuellement <span id="temps-actuel"></span></p>
    
    <button id="stop">Arrêter le temps</button>
    <button id="start">Relancer le temps</button>
    
    <script src="js/app.js"></script>
    </body>
    </html>​
  • js/app.js

    L'objet Date :
    var d = new Date("2015-05-14T14:15:00Z");
    
    console.log(d);
    d.setFullYear(2018);
    
    console.log(d);
    console.log(d.getDate());
    console.log(d.getMonth()+1); // Mois de 0 à 11
    console.log(d.getFullYear());
    console.log(d.getHours());
    console.log(d.getMinutes());
    console.log(d.getSeconds());
    console.log(d.getMilliseconds());
    
    console.log(d.toString());
    console.log(d.toUTCString());
    console.log(d.toDateString());​

    La fonction setInterval :

    function refreshTime() {
        var tempsCourant = document.getElementById("temps-actuel");
        var d = new Date();
        tempsCourant.innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    }
    
    refreshTime();
    var compteurTemps = setInterval(refreshTime, 1000); // 1000ms <=> 1s
    
    document.getElementById("stop").addEventListener("click", function() {
        clearInterval(compteurTemps);
    });
    
    document.getElementById("start").addEventListener("click", function() {
        refreshTime();
        compteurTemps = setInterval(refreshTime, 1000); // 1000ms <=> 1s
    });


    La fonction setTimeout :

    var timeout = setTimeout(function() {
        console.log("Salut ! Je suis en retard...");
    }, 3000);
    clearTimeout(timeout);
    console.log("Hello!");


Vérifiez vos connaissances !

Cet article dispose d'un questionnaire interactif vous permettant de tester vos connaissances. Veuillez vous connecter ou créer un compte pour y accéder

A propos de l'auteur

PrimFX
Boris ('PrimFX')

Je m'appelle Boris, j'ai 22 ans et je suis passionné d'informatique. Suite à mes études (Licence Informatique puis MSc Computer Science au Trinity College Dublin), je gère l'entreprise Single Quote co-fondée en 2019 et je profite de mon temps libre pour partager ma passion à travers des vidéos & articles 😃

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 1

  • LeDoNuK Le 14 novembre, à 18:48 | Répondre

    Très bonne vidéo très expliqué :D