Question

我正在研究如何使用角度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);
  };

Answer 1

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

<强> 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>

<强>的Javascript

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);   
}

Demo

Answer 2

如果你想使用$timeout，你必须注射它。但为什么不在一定的时间间隔内调用更新方法呢？

.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();
})

Answer 3

'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>

http://jsfiddle.net/pbxaD/49/

Answer 4

我尝试了倒计时，似乎有效。

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后重置计数器。

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

4 个答案: