O problema é que está a usar o conteúdo do elemento para dois efeitos:
- Guardar o valor atual (
valorInicial
).
- Guardar o valor final pretendido.
Quando chega à linha de mudar o innerHTML, ele acaba por alterar o valor final por arrasto.
Vamos então começar por tentar fazer o contador incrementar, sem esperar que ele pare eventualmente.
HTML:
<li class="marcacao" onMouseOver="aumenta('html')">HTML5 e CSS3
<div id="html" class="nivel">100</div>
</li>
JavaScript:
function aumenta(id){
var valorAtual = 0;
setInterval(function(){
var elemento = document.getElementById(id);//pega a div com o número
elemento.innerHTML = valorAtual++;
},20)
}
Vamos pôr agora um limite fixo:
function aumenta(id){
var valorAtual = 0;
setInterval(function(){
var elemento = document.getElementById(id);//pega a div com o número
var valor = elemento.innerHTML;
if (valorAtual <= 100) {
elemento.innerHTML = valorAtual++;
}
},20)
}
Por fim, vamos usar o valor dentro do elemento para decidir até onde ir:
function aumenta(id){
var elemento = document.getElementById(id);//pega a div com o número
var valorAtual = 0;
var valorFinal = elemento.innerHTML;
setInterval(function(){
if (valorAtual <= valorFinal) {
elemento.innerHTML = valorAtual++;
}
},20)
}
Importante ter em conta que isto tem dois problemas:
- O setInterval não para de ser chamado, simplesmente passa a não fazer nada. (mas continua a torrar energia)
- Não funciona bem se o utilizador retirar o rato de cima do elemento e voltar a passar em cima.
Uma correção para o 1 (jsfiddle):
function aumenta(id){
var elemento = document.getElementById(id);//pega a div com o número
var valorAtual = 0;
var valorFinal = elemento.innerHTML;
var interval = setInterval(function(){
if (valorAtual <= valorFinal) {
elemento.innerHTML = valorAtual++;
} else {
clearInterval(interval);
}
},20)
}
Também há formas de resolver o segundo problema, mas depende de como quiser que a função se comporte.