In this post i describe how to make a live clock using angularjs and also explain how to make timer using angularjs.
In this tutorial we use $interval, $timeout. for live clock use $interval because we want to live clock which refresh interval of 1 seconds. $timeout use for timer because time time have two process which is start and stop.
Let see how to implement Example:-
Html:-
<!DOCTYPE html>
<html ng-app="unified">
<head>
<meta charset="utf-8" />
<title>Image Upload</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container" >
<div class="row">
<p> {{name}}!</p>
<p>{{ clock | date:'medium'}}</p>
<br/>
<p>Timer</p>
<p ng-bind="counter"></p>
<button ng-click="stop()">Stop</button>
<button ng-click="countdown()">Start</button>
</div>
</div>
</body>
</html>
Script:-
var app = angular.module('unified', []);
app.controller('MainCtrl', function($scope, $interval, $timeout) {
$scope.name = 'Live Clock';
$scope.counter = 100;
var stopped;
var tick = function() {
$scope.clock = Date.now();
}
tick();
$interval(tick, 1000)
$scope.countdown = function() {
stopped = $timeout(function() {
console.log($scope.counter);
$scope.counter--;
$scope.countdown();
}, 1000);
};
$scope.stop = function(){
$timeout.cancel(stopped);
}
});
Now we have set all things above script add in head section or before body end of page
It work fine let see the output.
Example Link
Hope you like the post .Please share and comment below or customer care section
Thanks.
0 Comments