Countdown Timer using Javascript

How to build a timer with animation using just JS

Surabhi

7/27/20264 min read

Wanna get a countdown timer like above, using just JS?? Let’s get going! We need only a canvas, a setInterval, and an arc function to get it working.

First, let us define a div that will house a canvas. Our div also has a circular boundary to it to make over which we will overlay our countdown animation.

The CSS for the classes used above

.countdown-circle {
margin: 17% auto;
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
border: 7px solid #cdf3df;
}.countdown-canvas {
border: 0px solid #d3d3d3;
z-index: 99;
transform: translate(-10px, -10px);
}.countDown-time {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.center-txt {
text-align: center;
}

Let’s add the countdown seconds now

You just set the current time and also the current time + 60000ms (i.e, the time now + 60 seconds) in 2 different variables. Later update the latest current time and subtract the 2 variables every one second through setInterval() and display the latest value in your HTML div. Below is the code snippet with every line explained.

This will display the countdown time left in your HTML div

Now, let's add the animation around the circle.

I am adding requestAnimationFrame(); inside setInterval in the above countdown function. The requestAnimationFrame() will be called every one second and it will draw a new arc every second. Just add the following lines inside setInterval.

window.requestAnimationFrame(() => {
animate();
});

Now we must get a reference for our canvas element that we have declared in our HTML file and define our canvas’s width and height, and our arc’s radius. We must then draw an arc every second. Do not be intimidated by the code below. They are just a few variables that have been declared. An angle is calculated every time animate(time) is called and the same is drawn every time draw() is called.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.lineJoin = "round";
var cw = canvas.width;
var ch = canvas.height;
ctx.strokeStyle = "#49bfaa";
var PI = Math.PI;
var cx = cw / 2;
var cy = ch / 2;
var radius = cw / 2 - 10;
var angle = 0;
var direction = 1;
var requestId;function animate(time) {
ctx.clearRect(0, 0, cw, ch);
angle += Math.PI / 30;
draw();
}function draw() {
var counterclockwise = direction > 0 ? false : true;
var s = -Math.PI 2;
var e = angle - 2 Math.PI;
ctx.beginPath();
ctx.arc(cx, cy, radius, s, e, counterclockwise);
ctx.stroke();
}

Below is the entire JS code

// Countdown timer functionfunction countDown() {
let now = new Date(); //Today's date// Getting future time, ie, time 1 minute from now, by adding //60000ms to the current time.
let countDown = now.getTime() + 60000;//Calling setInterval every 1000ms i.e, every 1 sec
var x = setInterval(function () {
now = new Date().getTime(); //Getting the latest current time
let distance = Math.round((countDown - now) / 1000); //Finding the difference between the future time and the current time//Adding requestAnimationFrame()
window.requestAnimationFrame(() => {
animate();
});//Updating the latest difference in the html
document.getElementById("printTime").innerHTML = distance;//Stop the setInterval when 60s is up
if (distance <= 0) {
clearInterval(x);
document.getElementById("printTime").innerHTML = "Time up!";
document.getElementById("countDownEnd").disabled = false;
}
}, 1000);
}var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.lineJoin = "round";
var cw = canvas.width;
var ch = canvas.height;
ctx.strokeStyle = "#49bfaa";
var PI = Math.PI;
var cx = cw / 2;
var cy = ch / 2;
var radius = cw / 2 - 10;
var angle = 0;
var direction = 1;
var requestId;function animate(time) {
ctx.clearRect(0, 0, cw, ch);
angle += Math.PI / 30;
draw();
}function draw() {
var counterclockwise = direction > 0 ? false : true;
var s = -Math.PI 2;
var e = angle - 2 Math.PI;
ctx.beginPath();
ctx.arc(cx, cy, radius, s, e, counterclockwise);
ctx.stroke();
}

HTML Code

CSS Code

Still here? You probably have a project.

Bring me a problem