angularjs make a simple countdown

Question

I would like make a countDown with Angular js  this is my code   Html File   lt div ng-app ng-controller    countController  gt    countDown    lt div gt                                                                                                                                            js File  function countController  scope        scope countDown   10          var timer   setInterval function    scope countDown--  console log  scope countDown   1000           in console log it works I have a countdown but in   countdown   refresh it doesn t  could you help me please  thanks

User · Answer

I updated Mr  ganaraj answer to show stop and resume functionality and added angular js filter to format countdown timer  it is here on jsFiddle  controller code   use strict   var myApp   angular module  myApp        myApp controller  AlbumCtrl   function  scope  timeout         scope counter   0       scope stopped   false       scope buttonText  Stop        scope onTimeout   function             scope counter            mytimeout    timeout  scope onTimeout 1000             var mytimeout    timeout  scope onTimeout 1000        scope takeAction   function            if   scope stopped                timeout cancel mytimeout                scope buttonText  Resume                     else                       mytimeout    timeout  scope onTimeout 1000                scope buttonText  Stop                          scope stopped   scope stopped                 filter-code adapted from RobG from stackoverflow   myApp filter  formatTimer   function       return function input                function z n   return  n lt 10   0          n           var seconds   input   60          var minutes   Math floor input   60           var hours   Math floor minutes   60           return  z hours       z minutes      z seconds

User · Answer

You should use  scope  apply   when you execute an angular expression from outside of the angular framework    function countController  scope        scope countDown   10          var timer   setInterval function             scope countDown--           scope  apply            console log  scope countDown          1000         http   jsfiddle net andreev artem 48Fm2

User · Answer

Please take a look at this example here  It is a simple example of a count up  Which I think you could easily modify to create a count down    http   jsfiddle net ganarajpr LQGE2   JavaScript code   function AlbumCtrl  scope  timeout         scope counter   0       scope onTimeout   function             scope counter            mytimeout    timeout  scope onTimeout 1000             var mytimeout    timeout  scope onTimeout 1000         scope stop   function             timeout cancel mytimeout             HTML markup    lt  doctype html gt   lt html ng-app gt   lt head gt       lt script src  http   code angularjs org angular-1 0 0rc11 min js  gt  lt  script gt       lt script src  http   documentcloud github com underscore underscore-min js  gt  lt  script gt   lt  head gt   lt body gt   lt div ng-controller  AlbumCtrl  gt        counter        lt button ng-click  stop    gt Stop lt  button gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

scope countDown   30  var timer   scope countTimer   function          var time    timeout function               timer   setInterval function                   if   scope countDown  gt  0                      scope countDown--                else                   clearInterval timer                    window location href     Logoff                              scope  apply               1000          0       scope stop  function          clearInterval timer           IN HTML   lt button type  quot submit quot  ng-click  quot countTimer   quot  gt Start lt  button gt   lt button type  quot submit quot  ng-click  quot stop   quot  gt Clear lt  button gt

User · Answer

The way I did   it works     angular version 1 5 8 and above    Angular code   x000D   x000D  var app   angular module  counter        x000D   x000D  app controller  MainCtrl   function  scope   interval    x000D    var decreamentCountdown   function     x000D       scope countdown -  1  x000D      if   scope countdown  lt  1    x000D         scope message    timed out   x000D        x000D       x000D    var startCountDown   function     x000D       interval decreamentCountdown  1000   scope countdown  x000D       x000D     scope countdown   100  x000D    startCountDown    x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs angular js 1 6 10 angular min js  gt  lt  script gt  x000D   x000D   x000D   x000D   lt body ng-app  counter  ng-controller  MainCtrl  gt  x000D      countdown     message   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

function timerCtrl   scope  interval         scope seconds   0      var timer    interval function             scope seconds             scope  apply            console log  scope countDown          1000

User · Answer

You probably didn t declare your module correctly  or you put the function before the module is declared  safe rule is to put angular module after the body  once all the page is loaded   Since you re using angularjs  then you should use  interval  angularjs equivalence to setInterval which is a windows service    Here is a working solution    x000D   x000D  angular module  count       x000D     controller  countController   function  scope   interval    x000D       scope countDown   10  x000D       interval function     x000D        console log  scope countDown--   x000D         1000   scope countDown   x000D        x000D   lt script src  https   cdnjs cloudflare com ajax libs angular js 1 7 1 angular min js  gt  lt  script gt  x000D   x000D   x000D   lt body gt  x000D     lt div ng-app  count  ng-controller  countController  gt    countDown    lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    Note  it stops at 0 in the html view  but at 1 in the console log  can you figure out why

User · Answer

It might help to  How to write the code for countdown watch in AngularJS   Step 1   HTML Code-sample   lt div ng-app ng-controller  ExampleCtrl  gt       lt div ng-show  countDown text  gt  0  gt Your password is expired in 180 Seconds  lt  div gt       lt div ng-show  countDown text  gt  0  gt Seconds left   countDown text   lt  div gt       lt div ng-show  countDown text    0  gt Your password is expired   lt  div gt   lt  div gt    Step 2   The AngulaJs code-sample  function ExampleCtrl  scope   timeout      var countDowner  countDown   10    countDowner   function         if  countDown  lt  0              warning   fadeOut 2000         countDown   0        return     quit       else          scope countDown text   countDown     update scope       countDown--     -1        timeout countDowner  1000      loop it again                scope countDown text   countDown    countDowner       The full example over countdown watch in AngularJs as given below    lt  DOCTYPE html gt   lt html gt    lt head gt     lt title gt AngularJS Example - Single Timer Example lt  title gt     lt script src  https   ajax googleapis com ajax libs angularjs 1 0 8 angular min js  gt  lt  script gt     lt script gt      function ExampleCtrl  scope   timeout          var countDowner  countDown   10        countDowner   function             if  countDown  lt  0                  warning   fadeOut 2000             countDown   0            return     quit           else              scope countDown text   countDown     update scope           countDown--     -1            timeout countDowner  1000      loop it again                            scope countDown text   countDown        countDowner            lt  script gt   lt  head gt    lt body gt     lt div ng-app ng-controller  ExampleCtrl  gt       lt div ng-show  countDown text  gt  0  gt Your password is expired in 180 Seconds  lt  div gt       lt div ng-show  countDown text  gt  0  gt Seconds left   countDown text   lt  div gt       lt div ng-show  countDown text    0  gt Your password is expired   lt  div gt     lt  div gt   lt  body gt    lt  html gt

User · Answer

As of version 1 3 there s a service in module ng   interval  function countController  scope   interval        scope countDown   10           interval function   console log  scope countDown--   1000 0         Use with caution      Note  Intervals created by this service must be explicitly destroyed   when you are finished with them  In particular they are not   automatically destroyed when a controller s scope or a directive s   element are destroyed  You should take this into consideration and   make sure to always cancel the interval at the appropriate moment  See   the example below for more details on how and when to do this    From  Angular s official documentation

User · Answer

var timer seconds counter   120   scope countDown   function           timer seconds counter--        timer object    timeout  scope countDown  1000          scope timer   parseInt timer seconds counter   60    parseInt timer seconds counter   60     00         if   timer seconds counter   60   lt  10             scope timer            timer seconds counter   60     0     timer seconds counter   60     00            else            scope timer            timer seconds counter   60     timer seconds counter   60     00                   scope timer      minutes        if  timer seconds counter     0            timer seconds counter   30           timeout cancel timer object            scope timer    2 00 minutes

[javascript] angularjs make a simple countdown

Examples related to javascript

Examples related to html

Examples related to templates

Examples related to countdown

Examples related to angularjs