JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<div ng-app="timerApp">
<div ng-controller="timerController">
Current Time : {{time}} <br/>
<hr/>
<Button ng-click="timer_start()">Start</Button>
<Button ng-click="timer_stop()">Stop</Button>
<Button ng-click="timer_reset()" ng-disabled="isStartStatus">Reset</Button>
<span>{{timerCount}}</span>
</div>
</div>
JavaScript
var app = angular.module("timerApp", []);
app.controller("timerController",['$scope','$interval','$filter', function($scope, $interval, $filter){
$interval(function(){
$scope.time = $filter('date')(new Date(),"hh:mm:ss a", 'UTC')
},1000,0,null);
$scope.minutesleft = 0;
$scope.secondsleft = 0;
$scope.hoursleft = 0;
$scope.millisecondsleft = 0;
$scope.timerCount = $scope.hoursleft + ":" + $scope.minutesleft + ":" + $scope.secondsleft + ":" + $scope.millisecondsleft;
$scope.isStartStatus = true;
/**/
var promise;
$scope.timer_start = function(){
$scope.isStartStatus = true;
promise = $interval(function(){
$scope.millisecondsleft = $scope.millisecondsleft+1;
if($scope.millisecondsleft>100){
$scope.secondsleft = $scope.secondsleft+1;
$scope.millisecondsleft = 0;
if($scope.secondsleft>60){
$scope.minutesleft = $scope.minutesleft+1;
$scope.secondsleft = 0;
if($scope.minutesleft>60){
$scope.hoursleft = $scope.hoursleft+1;
$scope.minutesleft = 0;
if($scope.hoursleft==24){
$scope.hoursleft = 0;
}
}
}
}
$scope.timerCount = $scope.hoursleft + ":" + $scope.minutesleft + ":" + $scope.secondsleft + ":" + $scope.millisecondsleft;
},10,0,null);
};
$scope.timer_stop = function(){
$scope.isStartStatus = false;
$interval.cancel(promise);
}
$scope.timer_reset = function(){
$scope.minutesleft = 0;
$scope.secondsleft = 0;
$scope.hoursleft = 0;
$scope.millisecondsleft = 0;
$scope.timerCount = $scope.hoursleft + ":" +...