Real Time Countdown Timers to show remaining days hours minutes seconds for multiple events 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.
Earlier, I had written an article https://www.niceonecode.com/Blog/23/Real-Time-Countdown-Timer-to-show-remaining-days-hours-minutes-seconds-for-an-event-in-angularjs with single event but now I'm exploring it with multiple events in single page.
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))
return true;
for(var i=0;i<$scope.Timer.length;i++){
var cDate = new Date();
var diff = (cDate - $scope.Timer[i].InitTime) / 1000;
if (diff < $scope.Timer[i].Seconds) {
var secondToStr = $scope.SecondsToStr($scope.Timer[i].Seconds - diff);
$scope.Timer[i].RemainingTime = secondToStr.RemainingTime;
$scope.Timer[i].RemainingTimeStr = secondToStr.RemainingTimeStr;
//return true;
}
else {
$scope.Timer[i].RemainingTime = '00:00:00';
//return false;
}
}
return true;
}
$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 (counts) {
var timers =[];
for(var i=0;i<counts.length;i++){
var timer = {
RemainingTime: "",
RemainingTimeStr: "",
InitTime: new Date(),
Seconds: counts[i]
}
timers.push(timer);
};
$scope.Countdown();
return timers;
}
// populate from serverside to get real time
$scope.SecondsRemains = [6000,5000,40000];
$scope.Timer = $scope.InitTimer($scope.SecondsRemains);
}In HTML view page (Countdown.html):
<html lang="en" ng-app>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="EventCountDownApp">
<section ng-controller="countdownController">
<div>
<div class="countdownBox">
<div class="count">{{Timer[0].RemainingTime}}</div>
<div>{{Timer[0].RemainingTimeStr}} Remaining Until</div>
</div>
<div class="countdownBox">
<div class="count">{{Timer[1].RemainingTime}}</div>
<div>{{Timer[1].RemainingTimeStr}} Remaining Until</div>
</div>
<div class="countdownBox">
<div class="count">{{Timer[2].RemainingTime}}</div>
<div>{{Timer[2].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 ).TotalSecondsAnd initialize following line of code:
$scope.SecondsRemains = [6000,5000,40000]; Conclusion
In the above article, we saw how to create a real time countdown timers for multiple events in a single page. Hope, it will be helpful others.
