Simple JavaScript Chronometer

Simple JavaScript Chronometer
Code Snippet:Analog Stopwatch
Author: Luke Richardville
Published: May 4, 2024
Last Updated: May 4, 2024
Downloads: 50
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code defines a Stopwatch object to create a stopwatch with start, stop, and reset functionalities. It utilizes HTML, CSS, and JavaScript to display time in minutes, seconds, and milliseconds. It’s helpful for tracking time durations easily.

You can use this code to add a stopwatch feature to your website or web application. It helps users track time durations accurately during tasks or events. With its simple interface and clear functionality, it enhances user experience and productivity.

How to Create Simple JavaScript Chronometer

1. First, load the following Normalize CSS CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


2. In your HTML file, create a <div> element with the class “stopwatch” and an id of “stopwatch”. Inside this div, include a <canvas> element with the class “clock” and an id of “clock” for displaying the stopwatch visuals. Also, add an <h1> element with the class “timer” and an id of “timer” to display the time. Finally, include two <button> elements with ids “toggle” and “reset” for starting/stopping and resetting the stopwatch, respectively.

<div class="stopwatch" id="stopwatch">
  <canvas class="clock" id="clock"></canvas>
  <h1 class="timer" id="timer">00 : 00 . 000</h1>
  <button id="toggle">start</button>
  <button id="reset">reset</button>
</div>

3. Copy the provided CSS code into your CSS file to style the stopwatch elements. Feel free to customize the styles to match your website’s design.

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:before, *:after {
  content: "";
}

html, body {
  height: 100%;
}

body {
  font-size: 18px;
  background-color: #ebebeb;
}

.stopwatch {
  position: relative;
  padding: 2rem 1rem;
  text-align: center;
}
.stopwatch .clock {
  margin: auto;
  max-width: 100%;
  display: block;
}
.stopwatch .timer {
  padding: 1rem;
  font-weight: normal;
  font-size: 5vw;
  font-family: monospace;
}
.stopwatch button {
  padding: 8px 20px 10px;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid black;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
}
.stopwatch button:hover {
  background-color: white;
}

4. Add the provided JavaScript code to your JavaScript file. This code defines a Stopwatch object with start, stop, and reset methods. It also handles the updating of time and drawing of the stopwatch visuals.

/* ------------------------- */
//  stopwatch js
/* ------------------------- */

function Stopwatch(e, canvas) {
  var time = 0;
  var interval;
  var offset;

  function update() {
    // if stopwatch is on
    if (this.is_on) {
      time += delta();
    }
    var formatted_time = new time_formatter(time);
    var minutes = formatted_time.minutes;
    var seconds = formatted_time.seconds;
    var milliseconds = formatted_time.milliseconds;

    e.textContent = minutes + ' : ' + seconds + ' . ' + milliseconds;

    draw_clock(minutes, seconds, milliseconds);
  }

  function delta() {
    var now = Date.now();
    var time_passed = now - offset;
    offset = now;
    return time_passed;
  }

  function time_formatter(time_in_ms) {
    var time = new Date(time_in_ms);
    this.minutes = time.getMinutes().toString();
    this.seconds = time.getSeconds().toString();
    this.milliseconds = time.getMilliseconds().toString();

    // add zero if single digit
    if (this.minutes.length < 2) {
      this.minutes = '0' + this.minutes;
    }

    // add zero if single digit
    if (this.seconds.length < 2) {
      this.seconds = '0' + this.seconds;
    }

    // add zero if less than 3 digits
    while (this.milliseconds.length < 3) {
      this.milliseconds = '0' + this.milliseconds
    }
  }
  
  function degree_to_radian(degree) {
    // convert a degree to radian
    return degree * Math.PI / 180;
  }

  // create context
  var ctx = canvas.getContext('2d');

  var area = canvas.width = canvas.height = 400;
  var center = area / 2;
  var angle = 270;
  var radius = area / 2;
  
  function draw_clock(minutes, seconds, milliseconds) {    
    // set width of strokes
    ctx.lineWidth = '10';
    // clear the canvas
    ctx.clearRect(0, 0, area, area);
    
    // draw seconds stroke
    // animate seconds by using ms to animation more smoothly
    var smooth_seconds = Number(seconds) + (Number(milliseconds) / 1000);
    ctx.strokeStyle = 'rgba(46, 204, 113, 1)';
    ctx.beginPath();
    // Swap CW and CCW if minute is even. This is to resolve the second stroke from jumping to zero.
    if (minutes % 2 == 0) {
      ctx.arc(center, center, (area / 3), degree_to_radian(angle), degree_to_radian((smooth_seconds * 6) - 90));
    } else {
      ctx.arc(center, center, (area / 3), degree_to_radian(angle), degree_to_radian((smooth_seconds * 6) - 90), true);
    }
    ctx.stroke();
    
    // draw minutes stroke
    // animate minutes by using ms to animation more smoothly
    var smooth_minutes = Number(minutes) + (Number(smooth_seconds) / 60);
    ctx.strokeStyle = 'rgba(52, 152, 219, 1)';
    ctx.beginPath();
    ctx.arc(center, center, (area / 3) + 20, degree_to_radian(angle), degree_to_radian((smooth_minutes * 6) - 90));
    ctx.stroke();
    
    draw_numbers();
  }
  
  // draw numbers for clock
  function draw_numbers() {
    var numbers_angle = 270;
    for (var i = 60; i >= 5; i -= 5) {
      // x and y positions for numbers
      var number = {
        x: center + Math.cos(degree_to_radian(numbers_angle)) * (radius - 20),
        y: (center + 10) + Math.sin(degree_to_radian(numbers_angle)) * (radius - 20)
      };
      ctx.font = '18px monospace';
      ctx.textAlign = 'center';
      ctx.fillText(i, number.x, number.y);

      if (numbers_angle == 0) {
        numbers_angle = 360;
      }
      // 360 (degrees) / 12 (numbers)
      numbers_angle -= 30;
    }
  }

  this.is_on = false;

  // start stopwatch
  this.start = function() {
    // if stopwatch isn't on
    if (!this.is_on) {
      // every 10ms
      interval = setInterval(update.bind(this), 10);
      offset = Date.now();
      // turn on stopwatch
      this.is_on = true;
    }
  };

  // stop stopwatch
  this.stop = function() {
    // if stopwatch is on
    if (this.is_on) {
      clearInterval(interval);
      interval = null;
      this.is_on = false;
    }
  };
  
  // clear stopwatch
  this.reset = function() {
    if (!this.is_on) {
      time = 0;
      update();
    }
  };

  draw_numbers();
}

/* ------------------------- */
//  main js
/* ------------------------- */

var timer = document.getElementById('timer');
var clock = document.getElementById('clock');
var toggle_btn = document.getElementById('toggle');
var reset_btn = document.getElementById('reset');

var watch = new Stopwatch(timer, clock);

// toggle button
toggle_btn.addEventListener('click', function() {
  if (watch.is_on) {
    watch.stop();
    toggle_btn.textContent = 'start';
  } else {
    watch.start();
    toggle_btn.textContent = 'stop';
  }
});

// reset button
reset_btn.addEventListener('click', function() {
  watch.reset();
});

/* ------------------------- */

That’s all! hopefully, you have successfully created a Simple Javascript Chronometer. If you have any questions or suggestions, feel free to comment below.

Leave a Comment