AngularJS - Single Timer

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Example - Single Timer Example</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
        angular.module('MyApp', ['timer']);
        function MyAppController($scope) {
            $scope.timerRunning = true;

            $scope.startTimer = function (){
                $scope.$broadcast('timer-start');
                $scope.timerRunning = true;
            };

            $scope.stopTimer = function (){
                $scope.$broadcast('timer-stop');
                $scope.timerRunning = false;
            };

            $scope.$on('timer-stopped', function (event, data){
                console.log('Timer Stopped - data = ', data);
            });
        }
        MyAppController.$inject = ['$scope'];
    </script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyAppController">
        <h1>AngularJS - Single Timer Example</h1>
        <h3><timer/></h3>
        <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
    </div>
    <br/>
</body>
</html>

AngularJS - Multiple Timer

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Example - Multiple Timers Example</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
        angular.module('MyApp', ['timer']);
        function MyAppController($scope) {
            $scope.timerRunning = true;

            $scope.startTimer = function (){
                $scope.$broadcast('timer-start');
                $scope.timerRunning = true;
            };

            $scope.stopTimer = function (){
                $scope.$broadcast('timer-stop');
                $scope.timerRunning = false;
            };
        }
        MyAppController.$inject = ['$scope'];
    </script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyAppController">
        <h2>AngularJS - Multiple Timers Example</h2>
        <h3>Timer 1: <timer/></h3>
        <h3>Timer 2: <timer interval="2000"/></h3>
        <h3>Timer 3: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
        <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
    </div>
</body>
</html>

AngularJS - Polling Timers

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Example - Polling Timer Example</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
        angular.module('MyApp', ['timer']);
        function PollingController($scope) {
            $scope.timerRunning = true;
            $scope.timerConsole = '';

            $scope.timerType = '';

            $scope.startTimer = function (){
                $scope.$broadcast('timer-start');
                $scope.timerRunning = true;
            };

            $scope.stopTimer = function (){
                $scope.$broadcast('timer-stop');
                $scope.timerRunning = false;
            };

            $scope.$on('timer-tick', function (event, args) {
                $scope.timerConsole += $scope.timerType  + ' - event.name = '+ event.name + ', timeoutId = ' + args.timeoutId + ', millis = ' + args.millis +'\n';
            });
        }

        PollingController.$inject = ['$scope'];
    </script>
</head>
<body ng-app="MyApp">
    <div>
        <h1>AngularJS - Polling Timer Example using <code>timer-tick</code> event</h1>
        <div ng-init="timerType = 'Polling Server'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px;margin:15px">
        <h2>Polling Server every 5 seconds</h2>
        <h3><timer interval="5000"/></h3>
        <textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
        <br/>
        <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
        <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
        </div>
        <br/>

        <div ng-init="timerType = 'Saving Documents'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px">
        <h2>Saving Document every 3 seconds</h2>
        <h3><timer interval="3000"/></h3>
        <textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
        <br/>
        <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
        <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
        </div>

    </div>
    <br/>
</body>
</html>

JQuery Timer

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Timer Example</title>
    <script src="../jquery/jquery-1.9.1.min.js"></script>
    <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
        function startTimer() {
            $('timer')[0].start();
        }

        function stopTimer() {
            $('timer')[0].stop();
        }
    </script>
</head>
<body>
<div ng-controller="MyAppController">
    <h2>JQuery - Timer Example</h2>
    <h3 ng-app="timer"><timer/></h3>
    <button onclick="startTimer()">Start Timer</button>
    <button onclick="stopTimer()">Stop Timer</button>
</div>
<br/>
</body>
</html>

Plain JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Plain Javascript Timer Example</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
        function startTimer() {
            document.getElementsByTagName('timer')[0].start();
        }

        function stopTimer() {
            document.getElementsByTagName('timer')[0].stop();
        }
    </script>
</head>
<body>
<div>
    <h2>Plain JavaScript - Timer Example</h2>
    <h3><timer ng-app="timer"/></h3>
    <button onclick="startTimer()">Start Timer</button>
    <button onclick="stopTimer()">Stop Timer</button>
</div>
<br/>
</body>
</html>