time countdown using angular js

Question

I am new angular js. I am trying to make countdown using angular js .My code is

$scope.endingdays = function(datevalue){
    var endingin=new Date(datevalue);
    var date1=new Date();
    var date1_ms = Math.round(date1.getTime());
    var date2_ms = Math.round(endingin.getTime());
    var miliseconds = date2_ms - date1_ms;
    var second = miliseconds / 1000 ;
    var seconds = Math.floor(second) %60;
    var minutes =  Math.floor(second/60) % 60;
    var hours = Math.floor(second/3600);    
    result = hours<10 ? '0'+hours+':' : hours+':';      
    result += minutes<10 ? '0'+minutes+':' : minutes+':';
    result += seconds<10 ? '0'+seconds : seconds;
    return result;
};

This is my new code here every thing is fine except countdown.how i make countdown automatically ?.Now it showing countdown when reload page. My print code

{{endingdays(deal.endDate)}}

I am using angular js 1.2.23

your return statement should be return (hours+':'+minutes+':'+seconds); — V31
– V31, Commented Sep 11, 2014 at 12:06
Thanks @v31. But how i make to show only 2 digit and countdown automatically — Himanshu Bhuyan
– Himanshu Bhuyan, Commented Sep 11, 2014 at 12:15
why cant you Use angular timer ? siddii.github.io/angular-timer Saves Time — Prasad
– Prasad, Commented Jun 2, 2015 at 17:12

Sagar Parikh · Accepted Answer · 2014-09-11 12:33:07Z

1

Your code will go like. This is provided you are returning the values like you mentioned above. **

Use {{updatedTime}} in your HTML.

**

var timeUpdater = $interval(function() {

   var vals = $scope.endingdays(deal.endDate);
   $scope.updatedTime = vals[0]+':'+vals[1]+':'+vals[2];

}, 100 );// This is the time in miliseconds to update .
};

// To kill the timer

$scope.killTimeUpdater = function() {

   if (angular.isDefined(timeUpdater)) {
     $interval.cancel(timeUpdater);
     timeUpdater = undefined;
   }

};

answered Sep 11, 2014 at 12:33

Sagar Parikh

3063 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sagar Parikh Over a year ago

can you create a fiddle ?

Sathiyaraj · Accepted Answer · 2014-09-11 13:20:09Z

1

You will use to $filter and $interval directive means sure get timer display on your pages. Timer display Code Demo

answered Sep 11, 2014 at 13:20

Sathiyaraj

3433 silver badges12 bronze badges

Comments

StephanieQ · Accepted Answer · 2017-01-06 19:11:28Z

Use $interval and consider using a custom filter

var app = angular.module("timerApp", []);
app.controller("timerController",['$scope','$interval','$filter', function($scope, $interval, $filter){    
//initalizing variables so they aren't defined for the first time in the time
 // (And therefore take a second to show up)
    $scope.twoDaysFromNow = Math.floor(Date.now() / 1000) + ( 60 * 60 * 24 * 2);
    $scope.goal = ($scope.twoDaysFromNow);
    $scope.now  = Math.floor(Date.now() / 1000);
    $scope.time = $scope.goal - $scope.now;
  
  
    $interval(function(){   
        $scope.now  = Math.floor(Date.now() / 1000);
        $scope.time = $scope.goal - $scope.now;
    },1000,0,null);
}]);


app.filter('timeleft', function() {
  function isInteger(x) {
        return x % 1 === 0;
    }

  
  return function(value) {
    if (value && isInteger(value))
      return  toTimeLeft(value);
    
    return value;
  };

});


function toTimeLeft(t) {
                    var days, hours, minutes, seconds;
  
                    //display the words "days", "Hours" etc.
                    var daysD = ' day', hoursD = ' hour', minutesD = ' minute', secondsD = ' second';
                    days = Math.floor(t / 86400);
                    t -= days * 86400;
                    hours = Math.floor(t / 3600) % 24;
                    t -= hours * 3600;
                    minutes = Math.floor(t / 60) % 60;
                    t -= minutes * 60;
                    seconds = t % 60;
  
                    //Add an 's' on the end if it's not 1
                    if (seconds !== 1){secondsD += 's';}
                    if (minutes !== 1){minutesD += 's';}
                    if (hours   !== 1){hoursD   += 's';}
                    if (days    !== 1){daysD    += 's';}
  
                    // padding the numbers 
                    return [
                        pad(days, 2)    + daysD,
                        pad(hours, 2)   + hoursD,
                        pad(minutes, 2) + minutesD,
                        pad(seconds, 2) + secondsD
                    ].join(', ');
                };
function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
html {
  background: #305e8e;
  color: #fff;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="timerApp">
    <div ng-controller="timerController">
      <h1>Hurry up! Deal ends in:</h1>
        <h2>{{time | timeleft}}</h2>
    </div>
</div>

Chandru · Accepted Answer · 2014-09-11 12:25:35Z

0

You can use $interval to update the time.

There is also an example, which shows how to implement a clock with AngularJS.

edited Sep 11, 2014 at 12:25

Chandru

1,33413 silver badges21 bronze badges

answered Sep 11, 2014 at 12:13

Johannes

2,8125 gold badges25 silver badges33 bronze badges

Comments

Partha Roy · Accepted Answer · 2017-03-22 07:19:19Z

0

You can use $timeout dependency in your app and create a function in your controller -

  var counter = 120; // 2 minutes 
  var customTimeout = $timeout($scope.onTimeout, 1000); // starting the timeout
  // Timeout Function 
  $scope.onTimeout = function() {
  counter--;
  $scope.timer = parseInt(counter / 60) ? parseInt(counter / 60) : "00" ; 
  if((counter % 60) < 10){
    $scope.timer += ":"+ ( (counter % 60) ? "0"+(counter % 60) : "00" ) ;
  }
  else{
    $scope.timer += ":"+ ( (counter % 60) ? (counter % 60) : "00" ) ; 
  }
  $scope.timer += " minutes"
  if (counter === 0) {
    $scope.stop();
  }
}
// Stop FUnction
$scope.stop = function(customTimeout) {
  $timeout.cancel();
}

answered Mar 22, 2017 at 7:19

Partha Roy

1,61516 silver badges16 bronze badges

Collectives™ on Stack Overflow

time countdown using angular js

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related