Счетчик анимации для переменной Django - PullRequest
Новая
       3

Счетчик анимации для переменной Django

1 голос
/ 23 января 2020

Я хочу сделать одну из этих классных анимаций счетчика на приборной панели, используя мои Django переменные. Мой код пока не отображает никаких чисел, поэтому я делаю что-то не так.

Что-то вроде этого, если я хочу:

enter image description here

Вот мой код: 

    <div class="row">
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-users"></i>
                <h2 class="users-count"></h2>
                <h3 class="count-label">Users</h3>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-handshake-o"></i>
                <h2 class="dealers-count"></h2>
                <h3 class="count-label">Dealers</h3>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-address-card"></i>
                <h2 class="staff-count"></h2>
                <h3 class="count-label">Employees</h3>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-eye"></i>
                    <h2 class="visitors-count"></h2>
                <h3 class="count-label">Visitors Today</h3>
            </div>
        </div>
    </div>

<script>    
document.addEventListener("DOMContentLoaded", () => {
 function counter(id, start, end, duration) {
  let obj = document.getElementsByClassName(id),
   current = start,
   range = end - start,
   visitors_range = 11 - start,
   increment = end > start ? 1 : -1,
   step = Math.abs(Math.floor(duration / range)),
   timer = setInterval(() => {
    current += increment;
    obj.textContent = current;
    if (current == end) {
     clearInterval(timer);
    }
   }, step);
 }
 counter("users-count", 0, {{users.count}}, 3000);
 counter("dealers-count", 100, {{dealers.count}}, 2500);
 counter("staff-count", 0, {{staff.count}}, 3000);
 counter("visitors-count", 0, {{visitors.count}}, 3000);
});
</script>
...