2

Hello i want to create a simple script to run a countdown who start at 05:00 and finish at 00:00. I need help please. I can not find a script that works. Ive tested with function new Date() but i get a format like this Days/Hours/Minutes/Seconds and me i need only Minutes/Seconds. When the countdown is finished an alert appears with a message and the countdown is stopped at 00:00.

For the moment I've this:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
    $scope.timer = timer();
    
    function timer() {
    	var minutes = "03";
    	var secondes = "00";
    	var init = minutes + ":" + secondes;
      var res = document.getElementById("timer").innerHTML = init;
      return res;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>
<h4 id="timer">{{timer()}}</h4>

</div>

1
  • did the answer help? Commented Oct 27, 2017 at 4:58

3 Answers 3

8

you can simply use $interval function and use a custom filter to display it in seconds

$interval(function(){console.log($scope.counter--)},1000);

DEMO

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.carname = "Volvo";   
     $scope.counter = 180;   
     $interval(function(){console.log($scope.counter--)},1000);
});
app.filter('counter', [function() {
    return function(seconds) {
        return new Date(1970, 0, 1).setSeconds(seconds);
    };
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
{{counter | counter | date:'mm:ss'}}
</div>

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

1 Comment

Good thank you. And now how i add a stop when countdown is finished (0:00) please?
1

I took an example from here, slightly modified and here it is:

<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 60px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date().setMinutes(new Date().getMinutes()+5);

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>

Comments

0

Here is a simple example about countdown function using 'let' variable:

function countDown(time) {
  for(let i  = time; i >= 0; i--){
    setTimeout(function () {
      console.log(i);
    },(time - i) * 1000);
  }
}
countDown(5);

Here is a simple example about countdown recursion function using 'var' variable and:

function countDown2(time){
  for(var i  = time; i >= 0; i--){
      setTimeout(function () {
        console.log(time);
        time--;
      },(time-i)*1000);
    }
}
countDown2(5);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.