Progressive count using for [closed]

You can pass arguments to the function:

var span = document.querySelector('span');

for (var i = 0; i < 10; i++) {
  setTimeout(function(a) {    
    span.innerHTML = a;    
  }, i * 1000, i);
}

<span></span>

The setTimeout () method takes arguments as a function to execute after the time expires, where in this case it is function(a) .

The time, in milliseconds, that the method will wait before executing the function, which in this case is i * 1000 - i * 1000 because at each iteration the timer var waits a different time ( one second more for each call). % with% Milliseconds is equal to 1 second, in this case, the timer will display the counter with 1 second interval.

And finally, the method accepts parameters, as many as you need, which can be used in the internal function - in this case the parameter 1000 of the function will have the value of the last parameter in a

Lucas, if the program is executed in the console it follows an execution pattern and it prints everything that it sends, not allowing a clear, but there is a gambiarra. The "solution" is to use console.clear() , but the problem lies in the difference in browser execution for browser, as pointed out this MDN page .

If it's for a textArea or div:

var i = 0;
theLabel = document.getElementById("minhaDiv");
var interval = setInterval(function(){ 
    if (i == 100) clearInterval(interval);
    theLabel.innerHTML = i; 
    i++;
}, 
1000);

Hello you have to put your counter in a div and go changing it with time

for (var i = 0; i < 9; i++) {
    document.getElementById("demo").innerHTML=i
}

<div id="demo">
</div>

But I think a spinner is a better solution than this.

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<div id="demo" class="loader"></div>

There you put a timeout. I think it's to show the load of the page you want I'm not putting all the code but if that's what you want I'll go back.