xxxxxxxxxx1
<div class="container my-5">2
3
4
<!--Section: Content-->5
<section class="p-5 z-depth-1">6
7
<h3 class="text-center font-weight-bold mb-5">Counter</h3>8
9
<div class="row d-flex justify-content-center">10
11
<div class="col-md-6 col-lg-3 mb-4 text-center">12
<h4 class="h1 font-weight-normal mb-3">13
<i class="fas fa-file-alt indigo-text"></i>14
<span class="d-inline-block count-up" data-from="0" data-to="100" data-time="2000">100</span>15
</h4>16
<p class="font-weight-normal text-muted">Unique Page</p>17
</div>18
19
<div class="col-md-6 col-lg-3 mb-4 text-center">20
<h4 class="h1 font-weight-normal mb-3">21
<i class="fas fa-layer-group indigo-text"></i>22
<span class="d-inline-block count1" data-from="0" data-to="250" data-time="2000">250</span>23
</h4>24
<p class="font-weight-normal text-muted">Block Variety</p>25
</div>26
27
<div class="col-md-6 col-lg-3 mb-4 text-center">28
<h4 class="h1 font-weight-normal mb-3">29
<i class="fas fa-pencil-ruler indigo-text"></i>30
<span class="d-inline-block count2" data-from="0" data-to="330" data-time="2000">330</span>31
</h4>32
<p class="font-weight-normal text-muted">Reusable Component</p>33
</div>34
35
<div class="col-md-6 col-lg-3 mb-4 text-center">36
<h4 class="h1 font-weight-normal mb-3">37
<i class="fab fa-react indigo-text"></i>38
<span class="d-inline-block count3" data-from="0" data-to="430" data-time="2000">430</span>39
</h4>40
<p class="font-weight-normal text-muted">Crafted Element</p>41
</div>42
43
</div>44
45
</section>46
<!--Section: Content-->47
48
49
</div>1
1
xxxxxxxxxx1
(function ($){2
$.fn.counter = function() {3
const $this = $(this),4
numberFrom = parseInt($this.attr('data-from')),5
numberTo = parseInt($this.attr('data-to')),6
delta = numberTo - numberFrom,7
deltaPositive = delta > 0 ? 1 : 0,8
time = parseInt($this.attr('data-time')),9
changeTime = 10;10
11
let currentNumber = numberFrom,12
value = delta*changeTime/time;13
var interval1;14
const changeNumber = () => {15
currentNumber += value;16
//checks if currentNumber reached numberTo17
(deltaPositive && currentNumber >= numberTo) || (!deltaPositive &¤tNumber<= numberTo) ? currentNumber=numberTo : currentNumber;18
this.text(parseInt(currentNumber));19
currentNumber == numberTo ? clearInterval(interval1) : currentNumber; 20
}21
22
interval1 = setInterval(changeNumber,changeTime);23
}24
}(jQuery));25
26
$(document).ready(function(){27
28
$('.count-up').counter();29
$('.count1').counter();30
$('.count2').counter();31
$('.count3').counter();32
33
new WOW().init();34
35
setTimeout(function () {36
$('.count5').counter();37
}, 3000);38
}); Console errors: 0