Cara Membuat Stopwatch Dengan Javascript

6/09/2019 05:20:00 pm Tags:

CARA MEMBUAT STOPWATCH DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

Stopwatch Dengan JS
Cara Membuat Stopwatch Dengan Javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Indianaweb.blogspot</title>
  6.  <style type="text/css">
  7.   body{
  8.    background: #27ae60;
  9.    color: #f6f6f6;
  10.    display: flex;
  11.    flex-direction: column;
  12.    align-items: center;
  13.    justify-content: center;
  14.    height: 100vh;
  15.   }
  16.  
  17.   .stopwatch {
  18.    font-size: 14em;
  19.    font-family: monospace;
  20.   }
  21.  
  22.   ul {
  23.    margin: 0;
  24.    padding: 0;
  25.   }
  26.  
  27.   ul li {
  28.    list-style: none;
  29.    padding: 10px 0;
  30.   }
  31.   button {
  32.    cursor:pointer;
  33.    border-radius:5px;
  34.    padding: 5px 10px;
  35.   }
  36.  </style>
  37. </head>
  38. <body>
  39.  <div class="controls">
  40.   <button onclick="start()">Start</button>
  41.   <button onclick="pause()">Pause</button>
  42.   <button onclick="stop()">Stop</button>
  43.   <button onclick="restart()">Restart</button>
  44.   <button onclick="lap()">Lap</button>
  45.   <button onclick="resetLaps()">Reset Laps</button>
  46.  </div>
  47.  <div class="stopwatch">00:00:00</div>
  48.  <ul class="laps"></ul>
  49.  
  50.  <script type="text/javascript">
  51.  
  52.   var ms = 0, s = 0, m = 0;
  53.   var timer;
  54.  
  55.   var stopwatchEl = document.querySelector('.stopwatch');
  56.   var lapsContainer = document.querySelector('.laps');
  57.  
  58.   function start() {
  59.    if(!timer) {
  60.     timer = setInterval(run, 10);
  61.    }
  62.   }
  63.  
  64.   function run() {
  65.    stopwatchEl.textContent = getTimer();
  66.    ms++;
  67.    if(ms == 100) {
  68.     ms = 0;
  69.     s++;
  70.    }
  71.    if(s == 60) {
  72.     s = 0;
  73.     m++;
  74.    }
  75.   }
  76.  
  77.   function pause() {
  78.    stopTimer();
  79.   }
  80.  
  81.   function stop() {
  82.    stopTimer();
  83.    ms = 0;
  84.    s = 0;
  85.    m = 0;
  86.    stopwatchEl.textContent = getTimer();
  87.   }
  88.  
  89.   function stopTimer() {
  90.    clearInterval(timer);
  91.    timer = false;
  92.   }
  93.  
  94.   function getTimer() {
  95.    return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
  96.   }
  97.  
  98.   function restart() {
  99.    stop();
  100.    start();
  101.   }
  102.  
  103.   function lap() {
  104.    if(timer) {
  105.     var li = document.createElement('li');
  106.     li.innerText = getTimer();
  107.     lapsContainer.appendChild(li);
  108.    }
  109.   }
  110.  
  111.   function resetLaps() {
  112.    lapsContainer.innerHTML = '';
  113.   }
  114.  
  115.  </script>
  116.  
  117. </body>
  118. </html>

Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




Tags : 
Previous Post
Next Post
Related Posts