Real Time Countdown Timer to show remaining days hours minutes seconds for an event in angularjs

Views: 9942
Comments: 0
Like/Unlike: 0
Posted On: 28-Jun-2017 02:42 

Share:   fb twitter linkedin
Rahul M...
4916 Points
27 Posts

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 ).TotalSeconds

Conclusion
In the above article, we saw how to create a real time countdown timer. Hope, it will be helpful.

0 Comments
 Log In to Chat