问如何同时显示3个随机数和时间间隔
EN

Stack Overflow用户

提问于 2015-05-19 17:26:16

回答 1查看 579关注 0票数 0

我的任务是从1到100生成3个随机数。每一个都需要在2-5秒内生成。

每个数字(以及生成它的秒数)一生成就应该出现在屏幕上。因此，数字应该一个接一个地出现在屏幕上(而不是同时显示所有数字)。

我设法得到了屏幕上的三个随机数，但我无法得到屏幕上出现的秒数以及相应的数字。

  <html>
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body ng-app="Lotery">
      <div class="container" ng-controller="MainController">
        <div class="row">
          <div class="col-lg-12">
            <h1>Three random numbers from {{ bottomNumber }} to {{ topNumber }}<small> (each in {{ minSeconds }} - {{ maxSeconds }} seconds)</small></h1>
            <button class="btn btn-default" ng-click="firePromise()">Click to get the numbers</button>
            <span ng-repeat="nr in resultNumbers track by $index">
              <h1>{{ nr }} </h1>
            </span>
          </div>
        </div>
      </div>
    </body>
  </html>


angular.module('Lotery',[]);

angular.module('Lotery').controller('MainController', function($scope, $q) {

    $scope.topNumber = 100;
    $scope.bottomNumber = 1;
    $scope.maxSeconds = 5;
    $scope.minSeconds = 2;

    function getNumber(){
        var deferred = $q.defer();

        setTimeout(function(){
            $scope.randomNumber = Math.floor( Math.random() * ( $scope.topNumber - $scope.bottomNumber + 1 )) + $scope.bottomNumber;    
            $scope.seconds = 1000 * Math.floor( Math.random() * ( $scope.maxSeconds - $scope.minSeconds + 1 )) + $scope.minSeconds;
            if(angular.isNumber($scope.randomNumber)){
                deferred.resolve($scope.randomNumber);
            } else {
                deffered.reject('Error');
            } 
        }, $scope.seconds);

        return deferred.promise;
    };

    $scope.firePromise = function(){
        $scope.resultNumbers = [];

        var promise = getNumber();

        promise.then(function(success){
            $scope.resultNumbers.push(success);
            return getNumber();
        }).then(function(success){
            $scope.resultNumbers.push(success);
            return getNumber();
        }).then(function(success){
            $scope.resultNumbers.push(success);
        });
    };

});

看我的笔：http://codepen.io/M4i4/pen/EjyMdY

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-05-19 17:35:20

假设您的seconds 的逻辑是正确的，那么从getNumber()函数解析一个对象如何，而不是简单的数字，比如：

deferred.resolve({ number: $scope.randomNumber, seconds: $scope.seconds / 1000 });

然后在你的标记中：

<span ng-repeat="nr in resultNumbers track by $index">
    <h1>{{ nr.number }} - {{ nr.seconds }}</h1>        
</span>

更新后的CodePen

话虽如此，但逻辑似乎不太正确。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30332250

复制

相似问题

问如何同时显示3个随机数和时间间隔
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何同时显示3个随机数和时间间隔EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何同时显示3个随机数和时间间隔
EN