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.
