Created
September 21, 2018 18:50
-
-
Save celsoagra/a271c8406cbb75017b17bc38b8cbab43 to your computer and use it in GitHub Desktop.
AngularJS Stopwatch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="App"> | |
| <head> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script> | |
| <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body ng-controller="MainCtrl"> | |
| <stopwatch title="Stopwatch #1" time="sharedTime"></stopwatch> | |
| <div stopwatch title="Stopwatch #2" time="sharedTime"></div> | |
| <hr /> | |
| <div ng-controller="MainCtrl">Powered by AngularJS {{version}}</div> | |
| </body> | |
| </html> | |
| <script type="text/ng-template" id="stopwatch.html"> | |
| <h2>{{title}}</h2> | |
| <div><strong>Current Time: </strong>{{currentTime | date:'h:mm:ss a'}}</div> | |
| <div><strong>Elapsed Time: </strong>{{swctrl.getElapsedMs() }} ms</div> | |
| <div><strong>Elapsed Time: </strong>{{swctrl.getElapsedMsFormated() }}</div> | |
| <button id="start" class="btn btn-success" ng-click="swctrl.start()">Start</button> | |
| <button id="stop" class="btn btn-danger" ng-click="swctrl.stop()">Stop</button> | |
| <button id="reset" class="btn btn-default" ng-click="swctrl.reset()">Reset</button> | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* based on https://codepen.io/jhasselkus/pen/Efaxw */ | |
| angular.module('App', ['ui.bootstrap']) | |
| .controller('MainCtrl', function($scope, $interval) { | |
| $scope.version = angular.version.full; | |
| // The main controller maintains the current time for all stopwatch instances. | |
| $scope.sharedTime = new Date(); | |
| $interval(function() { | |
| $scope.sharedTime = new Date(); | |
| }, 500); | |
| }) | |
| .directive('stopwatch', function() { return { | |
| restrict: 'AE', | |
| templateUrl: 'stopwatch.html', | |
| scope: { | |
| // Set title in the isolate scope from the title attribute on the directive's element. | |
| title: '@title', | |
| // Set up a bi-directional binding between currentTime on the local scope and the parent | |
| // scope's variable containing the current time that's the value of the time attribute. | |
| currentTime: '=time' | |
| }, | |
| link: function(scope, element, attrs, ctrl) { | |
| }, | |
| controllerAs: 'swctrl', | |
| controller: function($scope, $interval) { | |
| console.log("Creating the directive's controller"); | |
| var self = this; | |
| var totalElapsedMs = 0; | |
| var elapsedMs = 0; | |
| //var time; | |
| var startTime; | |
| var timerPromise; | |
| self.start = function() { | |
| if (!timerPromise) { | |
| startTime = new Date(); | |
| timerPromise = $interval(function() { | |
| var now = new Date(); | |
| //$scope.time = now; | |
| elapsedMs = now.getTime() - startTime.getTime(); | |
| }, 31); | |
| } | |
| }; | |
| self.stop = function() { | |
| if (timerPromise) { | |
| $interval.cancel(timerPromise); | |
| timerPromise = undefined; | |
| totalElapsedMs += elapsedMs; | |
| elapsedMs = 0; | |
| } | |
| }; | |
| self.reset = function() { | |
| startTime = new Date(); | |
| totalElapsedMs = elapsedMs = 0; | |
| }; | |
| self.getTime = function() { | |
| return time; | |
| }; | |
| self.getElapsedMs = function() { | |
| return totalElapsedMs + elapsedMs; | |
| }; | |
| self.getElapsedMsFormated = function() { | |
| var milisec = totalElapsedMs + elapsedMs; | |
| var seconds = milisec / 1000; | |
| var hours = parseInt( seconds / 3600 ); | |
| seconds = seconds % 3600; | |
| var minutes = parseInt( seconds / 60 ); | |
| seconds = seconds % 60; | |
| var numSec = Number(""+seconds); | |
| return hours+":"+minutes+":" + numSec.toFixed(3); | |
| }; | |
| } | |
| }}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { padding-top:0px; padding-left:15px; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
based on https://codepen.io/jhasselkus/pen/Efaxw