javascript - angularjs make a simple countdown

Question

Welcome To Ask or Share your Answers For Others

javascript - angularjs make a simple countdown

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - angularjs make a simple countdown

I would like make a countDown with Angular js. this is my code:

Html File

<div ng-app ng-controller = "countController"> {{countDown}} <div>????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:28:26+0000

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:

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div ng-controller="AlbumCtrl">
    {{counter}}
    <button ng-click="stop()">Stop</button>    
</div>
</body>
</html>

Categories

javascript - angularjs make a simple countdown

javascript - angularjs make a simple countdown

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

JavaScript code:

HTML markup:

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags