Угловой счетчик числа JS - PullRequest
Новая
       10

Угловой счетчик числа JS

0 голосов
/ 05 ноября 2019

Я пытаюсь создать пользовательскую директиву для подсчета от 0 до X. У меня она успешно работает, но я не могу понять, как улучшить счет. проблема, с которой я сталкиваюсь, состоит в том, что конечные числа представляют собой 7/8 цифр, и отсчет до 1 на самом деле не работает по очевидным причинам.

Это три отдельных счетчика, каждый из которых будет иметь разный конецномер, который сейчас жестко запрограммирован. 

    .directive('cuImpactCounter', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        replace: false,
        scope: {},
        template: '<div class="row">' +
                    '<div class="col d-flex text-center flex-column">' +
                        '<div><p>Test 1</p></div>' +
                        '<div><p>{{ interestSavedMillis }}</p></div>' +
                    '</div>' +
                    '<div class="col d-flex text-center flex-column">' +
                        '<div><p>Test 2</p></div>' +
                        '<div><p>{{ interestEarnedMillis }}</p></div>' +
                    '</div>' +
                    '<div class="col d-flex text-center flex-column">' +
                        '<div><p>Test 3</p></div>' +
                        '<div><p>{{ savingsEarnedMillis }}</p></div>' +
                    '</div>' +
                '</div>',
        controller: ['$scope', function ($scope) {

            $scope.interestSavedMillis = 0;
            var interestSaved = 15016400;
            var i = 0;
            function interestSavedTimeLoop() {
                setTimeout(function() {
                    $scope.interestSavedMillis++;
                    $scope.$digest();
                    i++;
                    if (i < interestSaved) {
                        interestSavedTimeLoop();
                    }
                }, 1);
            }
            interestSavedTimeLoop();

            // 
            $scope.interestEarnedMillis = 0;
            var interestEarned = 12367690;
            var x = 0;
            function interestEarnedTimeLoop() {
                setTimeout(function () {
                    $scope.interestEarnedMillis++;
                    $scope.$digest();
                    x++;
                    if (x < interestEarned) {
                        interestEarnedTimeLoop();
                    }
                }, 1);
            }
            interestEarnedTimeLoop();

            $scope.savingsEarnedMillis = 0;
            var savingsEarned = 34819566;
            var y = 0;
            function savingsEarnedTimeLoop() {
                setTimeout(function () {
                    $scope.savingsEarnedMillis++;
                    $scope.$digest();
                    y++;
                    if (y < savingsEarned) {
                        savingsEarnedTimeLoop();
                    }
                }, 1);
            }
            savingsEarnedTimeLoop();

        }]
    }
}])

1 Ответ

1 голос
/ 05 ноября 2019

Для чего-то подобного я определенно пошел бы противоположным путем. Я приму решение о том, как долго должен работать цикл, чтобы достичь окончательного счета. Скажем, я хочу достичь 5 000 000 за 10 секунд. Это 10 000 миллисекунд, и давайте решим, что мы будем повторять каждые 10 миллисекунд. Это дает нам число циклов, равное 1000.

Таким образом, теперь у нас есть 1000 циклов, чтобы достичь 5 миллионов, т.е. добавьте 5000 к каждому циклу. 

let counter = 0;
setTimeout(function() {
   counter +=5000; 

   if(counter > interestSaved) 
       counter = interestSaved;

   $scope.interestSavedMillis = counter;
   $scope.$digest();

   if (counter < interestSaved) {
      interestSavedTimeLoop();
   }
}, 10); //10 millisecond loop

Очевидно, это сделает счетчиквыглядеть искусственноТаким образом, вы можете заменить значение приращения на значение, которое не является степенью 10. Основная идея состоит в том, чтобы счетчик остановился через определенное время.

Вы также можете добавить коэффициент скорости в уравнение, чтобы 10 миллионови 5 миллионов не заканчиваются одновременно.

Надеюсь, у вас есть идея.

...