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!");
Votre commentaire