Question

我想创建一个从0开始的进度条，并在一段时间内增加到最大值。当它达到最大值时，它会向下递增并重复该过程。这是我的尝试。

HTML：

<progressbar class="progress-striped active"
             max="max"
             value="value"
             type="success">
</progressbar>

JS：

app.controller('progressBar', function($scope,$timeout){
    $scope.max = 100;
    $scope.min = 0;
    $scope.value = 0;

    var increment = 5;
    var target = $scope.max;

    $scope.increment =  function() {
        $scope.value += increment;
    };

    $scope.decrement =  function() {
        $scope.value -= increment;
    };

    $timeout(function() {
        while ($scope.value <= target) {
            $scope.increment();
            if($scope.value === target) {
                target = $scope.min;
            };
        };

        while ($scope.value >= target) {
            $scope.decrement();
            if($scope.value === target) {
                target = $scope.max;
            };
        };
    }, 1000);
});

Answer 1

＆＃13;

angular.module("test", []).controller('testController', function($scope, $interval, $timeout) {

  var min = 0,
    max = 100;
  var value = min;
  $scope.myStyle = {
    "width": "0%"
  };
  var increment = 5;

  function fluctuator() {
    value += increment;
    $scope.myStyle.width = value + "%";
    if (value > max || value < min) {
      increment *= -1;
      value += increment;
    }

  }

  var interval = $interval(fluctuator, 200);
  $timeout(function() {
    $interval.cancel(interval);
    alert("canceled to prevent infinite running of the interval.")
  }, 10000)
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
< <div ng-app="test" ng-controller="testController">
  test page
  <br/>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" ng-style="myStyle">
    </div>
  </div>
  </div>

＆＃13;

以下示例可用于创建波动的进度条。我在10秒后停止动画。

AngularJS：如何制作波动的进度条？

1 个答案: