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.
