Comment réaliser un Timer en Javascript

jethron22

Jethron Kashira

Posted on December 16, 2022

Comment réaliser un Timer en Javascript

Pour créer un Timer en Javascript, tout d'abord il faut commencer par créer 3 fichiers dans votre dossier: un fichier HTML, Un fichier CSS pour le style et un fichier Javascript pour interagir avec le DOM ( Notre fichier HTML ).

Index.html
app.css
index.js

Enter fullscreen mode Exit fullscreen mode

Ensuite, nous allons vite créer un div qui va contenir notre Timer. Le Timer que nous allons créer va décrémenter à partir de 25min, lorque vous le lancez.


 <div class="container">  
        <h1 id="counter">
            <span id="text"> 25 : 00 </span>
        </h1>
 </div>

Enter fullscreen mode Exit fullscreen mode

N'oubliez pas de relier vos fichiers pour qu'ils interagissent entre eux ! Dans notre cas ici, nous allons relier notre fichier Javascript à l’intérieur de notre HTML comme ceci :


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

Enter fullscreen mode Exit fullscreen mode

Ce qui nous reste maintenant, c'est d'aller écrire du code dans notre index.js.
Pour interagir avec le DOM, nous devons sélectionner l'élément que nous souhaitons modifier, à partir de notre fichier Javascript. Et cela, nous allons le faire comme ceci :

document.getElementById("counter").textContent = "00 : 00"

Enter fullscreen mode Exit fullscreen mode

Ce code, nous allons le mettre à l'intérieur de la fonction setInterval. En JavaScript, setInterval est plus utilisé pour déclencher des action après un intervalle de temps donné, ou de la répéter après un intervalle de temps. Voici ce que cela va nous donner:

setInterval(function () {
    if (minutes == 0 && secondes === 1) {
        document.getElementById("counter").textContent = "00 : 00"
    } 

Enter fullscreen mode Exit fullscreen mode

À ce niveau nous avons crée une fonction avec la méthode setInterval. Nous avons posé une condition qui est tel que, les minutes lorqu'ils serons à 0 et les secondes à 1, que l'élément "counter" qui est sélectionné puisse afficher "00 : 00", dans le cas contraire, il va décrémenter !

else {
        secondes--;
        if (secondes == 0) {

            minutes--;
            secondes = 60;
            if (minutes == 0) {
                minutes = minutes

            }
Enter fullscreen mode Exit fullscreen mode

Puis Ceci :

if (minutes.toString().length == 1) {
            minutes = "0" + minutes;
        } if (secondes.toString().length == 1) {
            secondes = "0" + secondes;
        }
        document.getElementById("counter").textContent = minutes + ":" + secondes;
    }
}, 1000)

Enter fullscreen mode Exit fullscreen mode

et enfin voilà, la décrémentation de notre Timer va débuter à partir de 25 min et les seconde décrémenterons à partir de 60min..

💖 💪 🙅 🚩
jethron22
Jethron Kashira

Posted on December 16, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024