Angular JS Magazine

duminică, 14 septembrie 2014

Creating a Countdown Clock

This tip show you how to develop a countdown clock using Angular JS:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <style type="text/css">
        * { text-align: center; }
        h1 { font-family: Impact, Charcoal, sans-serif; }
        i.big { font-size: 60px; display: block; }
        i.big span { font-size: 24px; }
    </style>
    <script>
        angular.module("appModule", [])
                .controller("clockCtrl", function ($scope) {
                    $scope.eventDay = {
                        date: new Date("September 18, 2014 20:00:00"),
                        eventDetails: "Mr. Olympia 2014 - Las Vegas, Nevada"
                    }
                    $scope.timeTillEvent = {};

                    var updateClock = function () {
                        $scope.seconds = ($scope.eventDay.date - new Date()) / 1000;
                        $scope.timeTillEvent = {
                            daysLeft: parseInt($scope.seconds / 86400),
                            hoursLeft: parseInt($scope.seconds % 86400 / 3600),
                            minutesLeft: parseInt($scope.seconds % 86400 % 3600 / 60),
                            secondsLeft: parseInt($scope.seconds % 86400 % 3600 % 60)
                        }
                    };

                    setInterval(function () {
                        $scope.$apply(updateClock);
                    }, 1000);
                    updateClock();
                });
    </script>
</head>
<body>
<div ng-app="appModule" ng-controller="clockCtrl">
    <h1>{{ eventDay.eventDetails }}</h1>
    <i class="big">{{ timeTillEvent.daysLeft }} <span>days,</span></i>
    <i>
        {{ timeTillEvent.hoursLeft }} hours,
        {{ timeTillEvent.minutesLeft }} minutes and
        {{ timeTillEvent.secondsLeft }} seconds remaining !
    </i>
</div>
</body>
</html>