Real Time Countdown Timer to show remaining days hours minutes seconds for an event in angularjs
Introduction
A Countdown Timer is used to show how much time left from an event. Say we have an event which is going to start after two days. A Countdown Timer will display a counter saying days , hours , minutes and seconds left for the event to happen or the campaign to end. We will use $timeout of angularjs. To make Countdown Timer, a Real Time Countdown Timer, we will take remaining seconds (SecondsRemains) from the server side api/script.
Description
In controller (Countdown.js):
eventCountDownApp.controller('countdownController', ['$scope', '$timeout', countdownController]);
function countdownController($scope, $timeout) {
$scope.Timer = { RemainingTime: '00:00:00', RemainingTimeStr: "Hour" };
//Converts seconds to days hours minutes and seconds
$scope.SecondsToStr = function (count) {
var day = Math.floor(count / 86400);
var hour = Math.floor(count / 3600);
var min = Math.floor(count % 3600 / 60);
var sec = Math.floor(count % 3600 % 60);
var secondsToStr = '' + ('00' + hour).substr(-2) + ':' + ('00' + min).substr(-2) + ':' + ('00' + sec).substr(-2);
var remainingTimeStr = 'Hour';
if (hour > 1)
remainingTimeStr = 'Hours';
if (day > 0) {
secondsToStr = '' + day;
remainingTimeStr = 'Day';
if (day > 1)
remainingTimeStr = 'Days';
}
return { RemainingTime: secondsToStr, RemainingTimeStr: remainingTimeStr };
}
$scope.UpdateTimer = function () {
if ((!$scope.Timer) || (!$scope.Timer.Seconds))
return true;
var cDate = new Date();
var diff = (cDate - $scope.Timer.InitTime) / 1000;
if (diff < $scope.Timer.Seconds) {
var secondToStr = $scope.SecondsToStr($scope.Timer.Seconds - diff);
$scope.Timer.RemainingTime = secondToStr.RemainingTime;
$scope.Timer.RemainingTimeStr = secondToStr.RemainingTimeStr;
return true;
}
else {
$scope.Timer.RemainingTime = '00:00:00';
return false;
}
}
$scope.ReportTimeoutExpired = function () {
//do something to show time is expired
$scope.popTimeoutMessage = true;
}
//time out in a second
$scope.Countdown = function () {
$timeout(function () {
if ($scope.UpdateTimer())
$scope.Countdown();
else
$scope.ReportTimeoutExpired();
}, 1000);
};
//Initialize Timer
$scope.InitTimer = function (count) {
var timer = {
RemainingTime: "",
RemainingTimeStr: "",
InitTime: new Date(),
Seconds: count
}
$scope.Countdown();
return timer;
}
$scope.SecondsRemains = 200000; // populate from serverside to get real time
$scope.Timer = $scope.InitTimer($scope.SecondsRemains);
}In HTML view page (Countdown.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Count Down</title>
<meta name="robots" content="noindex,nofollow">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript">var eventCountDownApp = angular.module("EventCountDownApp", []);</script>
<script type="text/javascript" src="/Scripts/Countdown.js"></script>
</head>
<body ng-app="EventCountDownApp">
<section ng-controller="countdownController">
<div>
<div class="countdownBox">
<div class="count">{{Timer.RemainingTime}}</div>
<div>{{Timer.RemainingTimeStr}} Remaining Until</div>
</div>
</div>
</section>
</body>
</html>Note
In the server side: you can calculate reamining seconds as:
Soppose, your event start date time is store in EventStartDateTime. And Current Date time Object CurrentDateTime. Then,
SecondsRemains = ( EventStartDateTime - CurrentDateTime ).TotalSecondsConclusion
In the above article, we saw how to create a real time countdown timer. Hope, it will be helpful.
Thanks for reading this article!
Although this example was originally written using AngularJS and
$timeout, the same countdown logic can be implemented today using Angular, React, Vue, or plain JavaScript. The key idea is to calculate the remaining seconds on the server and update the countdown every second on the client side.If you're building event registrations, flash sales, online exams, OTP expiration timers, auctions, or booking systems, consider synchronizing the timer with the server time to prevent client-side clock manipulation and improve accuracy.
Feel free to share your use case or ask questions in the comments. I'd be happy to help.
Rahul Maurya
24-Jun-2026 at 05:31