Tuto JS - #16 Manipuler le temps en JavaScript

PrimFX 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
PrimFX

Salut tout le monde ! Je m'appelle Boris, j'ai 20 ans et je suis passionné d'informatique et de technologie. Je partage cette passion à travers mes vidéos sur YouTube et les articles de ce site internet. J'ai également co-fondé en 2019 l'entreprise de services informatique Single Quote et je suis en parallèle étudiant (en informatique bien sur) :-)

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