JS 06 – Create Countdown Timer in JavaScript in easy way

Write a code to create Countdown Timer in JavaScript

It best and simple Javascript program to create Countdown Timer.

Output: Javascript program to create countdown timer

Countdown Timer - ITVoyagers

Write a Javascript program for countdown timer

HTML code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Countdown Timer - ITVoyagers</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="popper.min.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
	<div class="text-center">
		<label class="h1">Time Left <br><span id="cntdwn_timer"></span></label>
	</div>
	<script type="text/javascript" src="countdown_timer.js"></script>
</body>
</html>

Javascript code (countdown_timer.js)

const initialTiming = 8;
var time = initialTiming * 86400;
 
var cntdwn_timer = document.getElementById("cntdwn_timer");
 
var countdownIntervalId = setInterval(countdown_timer,1000);
//itvoyagers.in
function countdown_timer() 
{
	if(time!=0)
	{
		days = Math.floor(time/86400);
		hours = Math.floor((time/3600)%24);
		minutes = Math.floor((time/60)%60);
		second = time%60;
		days = days < 10 ? '0' + days : days;
		hours = hours < 10 ? '0' + hours : hours;
		minutes = minutes < 10 ? '0' + minutes : minutes;
		second = second < 10 ? '0' + second : second;
		cntdwn_timer.innerHTML = `${days}<sub>D</sub> : ${hours}<sub>H</sub> : ${minutes}<sub>M</sub> : ${second}<sub>S</sub>`;
		time--;
	}
	else
	{
		cntdwn_timer.innerHTML = "00:00:00:00";
		clearInterval(countdownIntervalId);
	}
	//itvoyagers.in
}

Connect with us on following platforms

Leave a Comment