Problem with Number Counter

Ask the community
,
1

Hello, I am attempting to add a Number Counter found on wixcreate however I can not figure out a way to change the interval at which the numbers go up. My problem is that my first two numbers are 100 and 600 but my third number is 15,000 so I need it to go up drastically faster. I’ve attached a video of what the problem looks like.

I’ve tried changing the duration all the way down to zero and it still takes forever to get to 15,000. I think I need to change the interval between each step up. Like if I could make it count up by hundreds rather than by 1s that would be perfect but I can’t figure out how to do that. Any help is super appreciated!

Here is my code:

// Counter1 //

$w.onReady(function () {});
let startNum1 = 0;
let endNum1 = 100;
const duration1 =  3; // 1000 milliseconds 

$w.onReady(function () {
    setInterval(()=> {
        countUp1();     
    }, duration1);
});

function countUp1(){    
 if (startNum1 <= endNum1 ){
        $w('#StartNumber1').text = startNum1.toString();
        startNum1++;
    }
}

// Counter2 // 

$w.onReady(function () {});
let startNum2 = 0;
let endNum2 = 600;
const duration2 =  2; // 1000 milliseconds 

$w.onReady(function () {
    setInterval(()=> {
        countUp2();     
    }, duration2);
});

function countUp2(){    
 if (startNum2 <= endNum2 ){
        $w('#StartNumber2').text = startNum2.toString();
        startNum2++;
    }
}

// Counter3 //

$w.onReady(function () {});
let startNum3 = 0;
let endNum3 = 15000;
const duration3 =  0; // 1000 milliseconds 

$w.onReady(function () {
    setInterval(()=> {
        countUp3();     
    }, duration3);
});

function countUp3(){    
 if (startNum3 <= endNum3 ){
        $w('#StartNumber3').text = startNum3.toString();
        startNum3++;
    }
}
2

You should not use more than just ONE —> $w.onReady in your CODE.
It’s not recommended.

$w.onReady(()=>{
    start_Counter1();
    start_Counter2();
    start_Counter3();
});

function start_Counter1(){
   let startNum1 = 0;
   let endNum1 = 100;
   const duration1 = 25; // 1000 milliseconds 

   setInterval(()=> {
       if (startNum1 <= endNum1 ){
            $w('#StartNumber1').text = startNum1.toString();
            startNum1++;
            console.log(startNum1)
      }     
   }, duration1);
}

function start_Counter2(){
   let startNum2 = 0;
   let endNum2 = 600;
   const duration2 = 10; // 1000 milliseconds 

   setInterval(()=> {
       if (startNum2 <= endNum2 ){
           $w('#StartNumber2').text = startNum2.toString();
           startNum2++;
           console.log(startNum2)
      }     
   }, duration2);
}

function start_Counter3(){
   let startNum3 = 0;
   let endNum3 = 15000;
   const duration3 = 5; // 1000 milliseconds 
   let factor = 1

   setInterval(()=> {
      if (startNum3 <= endNum3 ){
      if (startNum3.toString().length>2){factor=5}
      if (startNum3.toString().length>3){factor=10}
           $w('#StartNumber3').text = startNum3.toString();
           startNum3=startNum3+(1*factor);
           console.log(startNum3)
       }    
   }, duration3);
}

Working example:
https://www.media-junkie.com/custom-counter

3

Hey @russian-dima thank you for the code above. It’s super helpful.

I just wanted to know if there’s a way to start the count up only onviewportEnter??

Thank you in advance.

4 
$w.onReady(()=>{
   //First counter will start automaticaly.....
	start_Counter1();
	
   //Second counter will start on Button-Click.....
	$w('#myButtonElement').onClick(()=>{
		start_Counter2();
	});
   //Third counter will start on ViewPortEnter.....	
	$w('#myWhichEverElement').onViewportEnter(()=>{
	       start_Counter3();
	});
});