Skip to main content

A simple start and stop timer counter in angularjs

     AngularJs using to create a start and stop counting timer functionality application. This application is need the following directive like $interval and $filter, We create default time object is display current timer clock functions.

        A timer counter is have three functionality as below that start, stop and reset. A start function is called to start the $interval directive to active so now counter is begin, This moment you are unable to proceed a reset logic. 

       Stop function is is call to $interval belongs one of the method like cancel, This method make corresponding active interval prose is stop it. Reset function is call to reset all scope value is to be zero.

HTML:

<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>

AngularJS:

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 + ":" + $scope.minutesleft + ":" + $scope.secondsleft + ":" +            $scope.millisecondsleft;
    }
   
}]);


Result:

Demo

Comments

Post a Comment

Popular posts from this blog

How has lockdown impacted Indian farmers?

How has lockdown impacted Indian farmers?             Generally compare to other sectors it's not major impacted by our Indian farmers but we acceptable minor impacts. Here we separate major two farming cultures one is mono farming culture another one poly farming culture. Mono farming :             The major impacts from our Indian farmer for monoculture. Here I have briefly explained what are the things we had faced our local farmers. Here I explain two different crops type: Daily crops : * We harvest more than 100-kilo grams daily crops like brinjal but we unable to sell those in local markets. * We are unable to reach urban markets. * We don't have enough transport facilities. * We unable buy require fertilizer and other complements * In the early stage we are facing manpower shortage but later it's not an issue. * We unable to do value-added products. * Waste is very high for somedays Se...
Post a Comment
Read more

How is a startup possible in farming and agriculture?

                 In this question we have two options, The first one is natural farming and another one is chemical farming. Both are the way to start an agriculture startup. Before we jump into the topic we have to look at more important things like Financial, Yield, quality of food and Marketing these are the very challenge we face. Chemical Farming 1. Capital & financial   * an agriculture startup we must have to invest for own land but chemical farming not require to buy an own land because chemical farming land does not produce yield more than 10 years so best you can acquire rental land.  * We have to buy cultivate equipment and machinery for chemical farming. In this case, we have two options       1. More necessity things are bought own equipment         2. Fewer necessities things go for a rental.   * Make a sufficient fund for runnin...
Post a Comment
Read more

Timer Display using AngularJS

Timer Display To display timer in a page means, we need to aware of angular directive as following $interval and $filter . Current time get from new Date() object from native java script.   $interval Directive:  A interval is wait into a millisecond or trigger to a function, This function many many time to repeatedly calling process is control to us.   Syntax:  $interval(fn, delay, [count], [invokeApply]); fn - a function to call repeatedly. Delay – number of millisecond to call a function. Count – Number of time to repeat.(0 value means no-repeat) invoteApply – set to false means it will skip. Example:  HTML: <div ng-app="timerApp">     <div ng-controller="timerController">         {{time}}     </div> </div> JAVAScript: var app = angular.module("timerApp", []); app.controller("timerController",['$scope','$interval...
Post a Comment
Read more