Go back
Bookmarked
0000088

Just for fun: simple counters at different speeds - Vanilla JavaScript

Updated on October 01, 2021

I saw this question on Stackoverflow and couldn't resist my fingers from tackling it. The main idea is to create a JavaScript algorithm that will make counters count at different speeds depending on the value set on the speed attribute inside the HTML span tag elements.

HTML

I use querySelectorAll() to get all the elements with .counter class, then I define two arrays: speeds[] and count[] which will allow the code to work.

The speeds[] array will save all the speeds of the elements. The purpose of this, is to use all these speeds variable for summing up the respective count[pos] varible inside the setInterval() method, allowing all counters to have their own independent count. The arrays are filled using the push() method inside a loop which will iterate through all elements inside the counters static NodeList.

JavaScript

The first conditional statement will clear the setInterval() method once the count[] variable counter equals 1000, which will cause the count to stop for all the counters.