Comment créer un compteur d'heure avec Javascript

/
Solutions techniques
/
Comment créer un compteur d'heure avec Javascript

Comment créer un compteur d'heure avec Javascript

Javascript
Développement front-end

00 : 00

Fichier index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NGLESSON.COM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Comment créer un compteur d'heure avec Javascript">
    <meta name="description" content="How to create an hour meter with Javascript">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
.caption-clock{
    width: 100%;
    height: 60px;
    color: #FFF;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 30px;
}
.clock{
    background: rgba(0,0,0,0.5);
    padding: 10px;
}
    </style>
</head>
<body class="container">
    <div class="row mt-5 mb-5 mx-auto text-center">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="caption-clock">
                <span class="h1 clock" id="min">00</span> <span class="h1 text-black">:</span> <span class="h1 clock" id="sec">00</span>
            </div>
            <div class="mt-3" nowrap>
                <input id="startButton" type="button" value="Start" class="btn btn-lg btn-success mb-3">
                <input id="pauseButton" type="button" value="Pause" class="btn btn-lg btn-success mb-3">
                <input id="resumeButton" type="button" value="Resume" class="btn btn-lg btn-success mb-3">
                <input id="resetButton" type="button" value="Reset" class="btn btn-lg btn-success mb-3">
                <input id="restartButton" type="button" value="Restart" class="btn btn-lg btn-success mb-3">
            </div>
        </div>
    </div>
<script src="script.js"></script>
</body>
</html>

Fichier script.js

var Clock = {
  totalSeconds: 0,
  start: function () {
    if (!this.interval) {
        var self = this;
        function pad(val) { return val > 9 ? val : "0" + val; }
        this.interval = setInterval(function () {
          self.totalSeconds += 1;
		  document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60));
          document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60));
        }, 1000);
    }
  },
  reset: function () {
    Clock.totalSeconds = null; 
    clearInterval(this.interval);
    document.getElementById("min").innerHTML = "00";
    document.getElementById("sec").innerHTML = "00";
    delete this.interval;
  },
  pause: function () {
    clearInterval(this.interval);
    delete this.interval;
  },
  resume: function () {
    this.start();
  },
  restart: function () {
     this.reset();
     Clock.start();
  }
};

document.getElementById("startButton").addEventListener("click", function () { Clock.start(); });
document.getElementById("pauseButton").addEventListener("click", function () { Clock.pause(); });
document.getElementById("resumeButton").addEventListener("click", function () { Clock.resume(); });
document.getElementById("resetButton").addEventListener("click", function () { Clock.reset(); });
document.getElementById("restartButton").addEventListener("click", function () { Clock.restart(); });