jQuery number counter

jQuery number counter - javascript

I'm using this jQuery snippet to animate a number counter from 0 to to the number provided in the span. Could someone show me how to modify it to get numbers to count DOWN to 0 when starting at a given value?
<span class="count">200</span>
$('.count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});

Something like this? I'm assuming that 'now' in the step function is just counting steps.
$('.count').each(function () {
$(this).data('start', parseInt($(this).text())).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text($(this).data(start) - now);
}
});
});
I verified this works in jsFiddle (https://jsfiddle.net/0mtht3xm/):
$('.count').each(function () {
$(this).data('start', parseInt($(this).text())).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text($(this).data('start') - Math.ceil(now));
}
});
});

There are countless different ways to create a counter that counts down to 0. This is just how I would do it:
HTML:
<span class="count">200</span>
JS:
var $count = $('.count');
var num = parseInt($count.text());
var interval = window.setInterval(updateTime, 1000);
function updateTime() {
num--;
$count.text(num.toString());
if (num <= 0) {
window.clearInterval(interval);
}
}

Related

updating the online counter without reloading the page

Help me please. I have a script on my site that shows (online player counter on the server in GTA), when the page loads, it starts from zero to the number of players on the site. [counter code][1]
[1]: https://i.stack.imgur.com/5gkkX.jpg
var updateInterval = 700;
_timer = setInterval(updatePlayerCount, updateInterval);
function ShowCounter() {
clearInterval(_timer);
$('#online').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
function updatePlayerCount() {
var ip = "rage2.grand-rp.su:22005";
$.getJSON('https://cdn.rage.mp/master', function(masterlist) {
if(masterlist[ip] != undefined){
document.getElementById('online').innerHTML = masterlist[ip].players;
ShowCounter();
}
});
}
I have a _timer, it should update the numbers without reloading the page, but somehow it doesn't work. How to fix it? I posted this on jsfiddle https://jsfiddle.net/kg8uap9d/8/

Instead of setInteval, use setTimeout
var updateInterval = 5000;
_timer = setTimeout(updatePlayerCount, updateInterval);
function updatePlayerCount() {
var ip = "rage2.grand-rp.su:22005";
$.getJSON('https://cdn.rage.mp/master', function(masterlist) {
if(masterlist[ip] != undefined){
document.getElementById('online').innerHTML = masterlist[ip].players;
ShowCounter();
_timer = setTimeout(updatePlayerCount, updateInterval);
}
});
}

Comma between numbers script

I have tried endless solutions that I have found for this on these forums and none that I have found work or I am simply putting it in the wrong place. I am trying to force commas for thousand and millions places. Any suggestions and placement would be appreciated.
Thank you.
jQuery(window).scroll(startCounter);
function startCounter() {
var hT = jQuery('.counter').offset().top,
hH = jQuery('.counter').outerHeight(),
wH = jQuery(window).height();
if (jQuery(window).scrollTop() > hT+hH-wH) {
jQuery(window).off("scroll", startCounter);
jQuery('.counter').each(function () {
var $this = jQuery(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
}

Assuming you would want to comma seperate values by hunders,thousands,millions,...
You may do:
let num = 9876543210;
console.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
// or
console.log((num).toLocaleString());
// or
console.log(new Intl.NumberFormat('en-US', {}).format(num));

Why is this counting down after reaching the target?

I wanted to have a counter that only activates when actually on the screen. I've managed to mangle this together from other examples I've found.
HTML:
<div>Scroll Down</div>
<span class="count">200</span>
CSS:
div {
height:800px;
background:red;
}
h1 {
display:none;
}
Javascript:
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
DEMO:
https://jsfiddle.net/76d57vjL/
The problem is, it reaches 200 and then counts back down to 0 but I want it to just stay at 200. I can't seem to figure out whats actually causing it though.

The problem was that you were creating more than 1 animation, so going back to 1 after starting the count, i fixed it with a flag, but probably you could make something with the heights to check that out.
Here's the fix with the flag: https://jsfiddle.net/uc0av8fh/
var flag = true;
$(window).scroll(function() {
$('#scroll-to');
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('.count').each(function () {
if(!flag) return;
//console.log();
flag = false;
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
return 1;
}
});
});
}
});

Jquery Number counting slowdown animation when target reach

$(this).prop('Counter', 0).animate({
Counter: 123456789
}, {
duration: 2000,
easing: 'easeOutBack',
step: function (now) {
$(this).html(parseFloat(now).toFixed(2));
},
complete: function () {
}
});
In this code number running same speed till ends. I need the number running speed will slow down when reached the target.

You can make a variable for speed and incrase this with step. In your exemple is:
var speed = 2000;
$(this).prop('Counter', 0).animate({
Counter: 123456789
}, {
duration: speed,
easing: 'easeOutBack',
step: function (now) {
$(this).html(parseFloat(now).toFixed(2));
if(counter < 1000){
speed += 100;
}
},
complete: function () {
}
});

jQuery animated number counter from zero to value

I have created a script to animate a number from zero to it's value.
Working
jQuery
$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>
Not Working
I now want to run the script several times on the page for each matching class.
Below is what I am trying but with no success so far:
HTML
<span class="Count">200</span>
<span class="Count">55</span>
JQUERY
$('.Count').each(function () {
jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$(this).text(Math.ceil(this.Counter));
}
});
});

Your thisdoesn't refer to the element in the step callback, instead you want to keep a reference to it at the beginning of your function (wrapped in $thisin my example):
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
Update: If you want to display decimal numbers, then instead of rounding the value with Math.ceil you can round up to 2 decimals for instance with value.toFixed(2):
step: function () {
$this.text(this.Counter.toFixed(2));
}

this inside the step callback isn't the element but the object passed to animate()
$('.Count').each(function (_, self) {
jQuery({
Counter: 0
}).animate({
Counter: $(self).text()
}, {
duration: 1000,
easing: 'swing',
step: function () {
$(self).text(Math.ceil(this.Counter));
}
});
});
Another way to do this and keep the references to this would be
$('.Count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
FIDDLE

IMPORTANT: It seems like a small difference but you should really use a data attribute to hold the original number to count up to. Altering the original number can have un-intended consequences. For instance, I'm having this animation run everytime an element enters the screen. But if the element enters, exits, and then enters the screen a second time before the first animation finishes, it will count up to the wrong number.
HTML:
<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>
JQuery:
$('.count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).data('value')
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(this.Counter.toFixed(2));
}
});
});

What the code does, is that the number 8000 is counting up from 0 to 8000. The problem is, that it is placed at the middle of quite long page, and once user scroll down and actually see the number, the animation is already dine. I would like to trigger the counter, once it appears in the viewport.
JS:
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
And HTML:
<span class="count">8000</span>

Here is my solution
and it's also working, when element shows into the viewport
You can see the code in action by clicking jfiddle
var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
var firEvent = false,
objectPosTop = $('.go-counterTeaser').offset().top;
//when element shows at bottom
var elementViewInBottom = objectPosTop - winHeight;
$(window).on('scroll', function() {
var currentPosition = $(document).scrollTop();
//when element position starting in viewport
if (currentPosition > elementViewInBottom && firEvent === false) {
firEvent = true;
animationCounter();
}
});
}
//counter function will animate by using external js also add seprator "."
function animationCounter(){
$('.numberBlock h2').each(function () {
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator('.');
var counterValv = $(this).text();
$(this).animateNumber(
{
number: counterValv,
numberStep: comma_separator_number_step
}
);
});
}
https://jsfiddle.net/uosahmed/frLoxm34/9/

If you wanna handle based on if it is int or float
$(".display-counter").each(function () {
$(this)
.prop("Counter", 0)
.animate(
{
Counter: $(this).text()
},
{
duration: 4000,
easing: "swing",
step: function (now, tween) {
// Check added for decimal number
if(parseInt(tween.end) == parseFloat(tween.end)){
$(this).text(Math.ceil(now));
} else{
$(this).text(now.toFixed(2));
}
},
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="display-counter">123</p>
<p class="display-counter">125.3</p>

You can get the element itself in .each(), try this instead of using this
$('.Count').each(function (index, value) {
jQuery({ Counter: 0 }).animate({ Counter: value.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
value.text(Math.ceil(this.Counter));
}
});
});

This worked for me
HTML CODE
<span class="number-count">841</span>
jQuery Code
$('.number-count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});

You can do it with animate function in jQuery.
$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
duration: 8000,
easing: 'linear',
step: function () {
$('.yourelement').html(Math.floor(this.countNum));
},
complete: function () {
$('.code').html(this.countNum);
//alert('finished');
}
});
Demo

This is working for me
$('.Count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});

This is work for me !
<script type="text/javascript">
$(document).ready(function(){
countnumber(0,40,"stat1",50);
function countnumber(start,end,idtarget,duration){
cc=setInterval(function(){
if(start==end)
{
$("#"+idtarget).html(start);
clearInterval(cc);
}
else
{
$("#"+idtarget).html(start);
start++;
}
},duration);
}
});
</script>
<span id="span1"></span>

$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>

Develop Reference

JavaScript is the programming language of the Web.

jQuery number counter - javascript

Related

updating the online counter without reloading the page

Comma between numbers script

Why is this counting down after reaching the target?

Jquery Number counting slowdown animation when target reach

jQuery animated number counter from zero to value

Categories

Resources