Home > Web Front-end > JS Tutorial > body text

JavaScript Fun Question: Loop Counter

黄舟
Release: 2018-05-17 11:21:50
Original
1641 people have browsed it

Everyone in the front-end team:

Let’s put down what we are doing first, and there are new demands.

The big counter on the homepage of our website is the one that counts the number of user software downloads.

The product manager looked at it and felt that some special effects should be added to make it look more user-friendly.

He has come up with a plan, which is to have a circular scrolling effect when the number stops before the exact value.

Similar to this:


The task is as follows:

Create a function based on the count valueString, create two-dimensional array and return.

For example:

counterEffect("1250") // [[0,1],[0,1,2],[0,1,2,3,4,5],[0]] 
counterEffect("0050") // [[0],[0],[0,1,2,3,4,5],[0]] 
counterEffect("0000") // [[0],[0],[0],[0]]
Copy after login

For example, "1250", its first character 1, and the of the two-dimensional array [0,1] corresponds to the second character 2, which corresponds to [0,1,2].

is the process from 0 to the current character. Every intermediate number must be entered into the array.

Idea:

It’s very simple. Traverse the string from left to right, generate a second-dimensional array based on the current characters, and push into the first-dimensional array.

function counterEffect(hitCount) {
    var result = [];
    for(var i=0;i<hitCount.length;i++){
        var chr = hitCount.charAt(i);
        var num = chr - 0;
        var temp = [];
        for(var j=0;j<=num;j++){
            temp.push(j);
        }
        result.push(temp);
    }
    return result;
}
Copy after login

The above is the content of JavaScript interesting question: loop counter. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template