angularjs 做一个简单的倒计时 [英] angularjs make a simple countdown

查看:28
本文介绍了angularjs 做一个简单的倒计时的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想用 Angular js 进行倒计时.这是我的代码:

HTML 文件

{{countDown}}

js 文件

function countController($scope){$scope.countDown = 10;var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);}

在 console.log 中它工作我有一个倒计时但在 {{countdown}} 刷新它没有请问你能帮帮我吗?谢谢!

解决方案

请看这里的例子.这是一个简单的计数示例!我认为您可以轻松修改以创建倒计时.

http://jsfiddle.net/ganarajpr/LQGE2/

JavaScript 代码:

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 标记:

<头><script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script><script src="http://documentcloud.github.com/underscore/underscore-min.js"></script><身体><div ng-controller="AlbumCtrl">{{柜台}}<button ng-click="stop()">停止</button>

</html>

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!

解决方案

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>

这篇关于angularjs 做一个简单的倒计时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆