Javascript 如何使用角度键进行秒倒计时？_Javascript_Angularjs

Javascript 如何使用角度键进行秒倒计时？

javascript angularjs

Javascript 如何使用角度键进行秒倒计时？,javascript,angularjs,Javascript,Angularjs,我正在研究如何使用angular js进行60秒倒计时我想在页面上显示倒计时！当倒计时结束时，控制器应该重新加载以再次执行代码！并获取更新json对象我的控制器看起来像： .controller('todaymatches', function($rootScope,$scope, $http) { $http.get("http://www.domaine.com/updatedjson/") .success(function (response) {

我正在研究如何使用angular js进行60秒倒计时

我想在页面上显示倒计时！当倒计时结束时，控制器应该重新加载以再次执行代码！并获取更新json对象

我的控制器看起来像：

.controller('todaymatches', function($rootScope,$scope, $http) {

    $http.get("http://www.domaine.com/updatedjson/")
        .success(function (response) {
            $scope.matches = response;
        });
})

我被创造了一个密码！我不确定这是否正常工作！不管怎么说，它在我的应用程序上不起作用

$scope.countdown = function() {
    stopped = $timeout(function() {
       console.log($scope.counter);
     $scope.counter--;   
     $scope.countdown();   
    }, 1000);
  };

如果要使用

$timeout

，必须将其注入。但是为什么不在一定的时间间隔内调用update方法呢

.controller('todaymatches', function($rootScope,$scope, $http, $interval) {

    var update = function() {
        $http.get("http://www.domaine.com/updatedjson/")
        .success(function (response) {
            $scope.matches = response;
        });
    };

    var initialize = function() {
        $interval(function() {
            update();
        }, 60 * 1000)
    };

    initialize();
})

我试着用这个倒计时，它似乎起作用了

app.controller('CountDownController', function($scope, $timeout) {
    $scope.counter = 60;
    $scope.countdown = function() {
        if ($scope.counter === 0) {
            // do your reload and execute here
            //Just reset the counter if you just want it to count again
            $scope.counter = 60;
            return;
        } else {
            $timeout(function() {
                console.log($scope.counter);
                $scope.counter--;
                $scope.countdown();
            }, 1000);
        }
    };
    $scope.countdown();
});

您可以在上面代码的if条件中绑定要执行的各种操作，如注释所示。我只是在倒计时到0后重置计数器。

下面是一个简单的倒计时示例：

HTML

<!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="CountdownController">
      {{counter}}
   </div>
</body>
</html>

严格使用；
var ngApp=angular.module（'myApp'，['Test']）；
var c1=角度模块（'测试'，[]）；
c1.控制器（'Ctrl1'，函数（$scope，$timeout）{
$scope.coutDown=函数（）{
$scope.onTimeout=函数（）{
log（“value”，$scope.value）；
$scope.value=$scope.value-1；
返回$scope.coutDown（$scope.value）；
};
变量延迟=$timeout（$scope.onTimeout，1000）；
如果（$scope.value<1）{
$timeout.cancel（延迟）；
返回true；
}
返回false；
};
$scope.value=5；
$scope.coutDown（）；
});
{{value}}

在这里看一下Angular的指令文档：看看“创建一个操纵DOM的指令”。这非常有效！你知道当60秒结束时我如何重新加载控制器吗？？？@YasserB.，在我的回答中，当计数器变为0时，在else语句中重置倒计时。你在那里添加逻辑来重新加载倒计时。

function CountdownController($scope,$timeout) {
    $scope.counter = 60;
    $scope.onTimeout = function(){
        if ($scope.counter > 0) {
            $scope.counter--;
            mytimeout = $timeout($scope.onTimeout,1000);
        } else {
            $scope.counter = 60;
        }
    }
    var mytimeout = $timeout($scope.onTimeout,1000);   
}

'use strict';

var ngApp = angular.module('myApp', ['Test']);

var c1 = angular.module('Test', []);
c1.controller('Ctrl1', function ($scope, $timeout) {

    $scope.coutDown = function () {

        $scope.onTimeout = function () {
            console.log("value", $scope.value);
            $scope.value = $scope.value - 1;
            return $scope.coutDown($scope.value);
        };
        var delay = $timeout($scope.onTimeout, 1000);

        if ($scope.value < 1) {
            $timeout.cancel(delay);
            return true;
        }
        return false;
    };

    $scope.value = 5;
    $scope.coutDown();

});


<div ng-app="myApp">
    <div ng-controller="Ctrl1">
        <h1>{{value}}</h1>
    </div>
</div>