AngularJS



<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Angular Countdown Timer Directive | Angular Timer | Angular time counter</title>
</head>

<body>
  <div class='wrap' ng-app='app'>
  <div class='time-to'>
    The world might end in...
    <span countdown='' date='April 25, 2018 12:00:00'>&nbsp;</span>
  </div>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
  </body>
</html>

Example : App.js


(function() {
  angular.module('app', []).directive('countdown', [
    'Util', '$interval', function(Util, $interval) {
      return {
        restrict: 'A',
        scope: {
          date: '@'
        },
        link: function(scope, element) {
          var future;
          future = new Date(scope.date);
          $interval(function() {
            var diff;
            diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);
            return element.text(Util.dhms(diff));
          }, 1000);
        }
      };
    }
  ]).factory('Util', [
    function() {
      return {
        dhms: function(t) {
          var days, hours, minutes, seconds;
          days = Math.floor(t / 86400);
          t -= days * 86400;
          hours = Math.floor(t / 3600) % 24;
          t -= hours * 3600;
          minutes = Math.floor(t / 60) % 60;
          t -= minutes * 60;
          seconds = t % 60;
          return [days + 'd', hours + 'h', minutes + 'm', seconds + 's'].join(' ');
        }
      };
    }
  ]);

}).call(this);

Example : Style.css


.time-to {
  text-align: center;
  font-family: Bangers;
  color: white;
  font-size: 35px;
  letter-spacing: 2px;
}
.time-to span {
  display: block;
  font-size: 80px;
  color: red;
}