2015-06-02 55 views
0

我试过并环视四周,但找不到任何类似的东西。增加具有特定计时器值的数字的值

<div> <span>23</span>/ 30 </div> 

我在这里的思考过程是我希望23每15秒增加一个值。

当它达到30时,它将停止计数。我不知道如何让它“停止”计数,以及我应该如何处理这样的问题。

任何帮助将不胜感激!

回答

0

如果一个类被添加到跨度元件像这样:

<div> <span class="counter">23</span>/ 30 </div> 

然后此JavaScript代码将工作:

var currentCount = parseInt($('.counter').text()); 
var increaseCount = function() { 
    if (currentCount < 30) { 
     currentCount = currentCount + 1; 
     $('.counter').text(currentCount); 
     setTimeout(increaseCount, 15000); 
    } 
    return; 
}; 
setTimeout(increaseCount, 15000); 

下面是设置为第二定时器的示例: https://jsfiddle.net/aqe43oLa/1/

1

这是一个可能的解决方案,请注意,我会为演示每秒做一次迭代,但您可以通过做来降低速率。

var wrapper, value, timer; 
 

 
window.addEventListener('load', startCounter, false); 
 

 
function startCounter(){ 
 
    document.querySelector('button').onclick = startCounter; 
 
    wrapper = document.querySelector('span'); 
 
    value = 22; 
 
    count(); 
 
} 
 

 
function count(){ 
 
    clearTimeout(timer); 
 
    value++; 
 
    wrapper.innerHTML = value; 
 
    if(value < 30){ timer = setTimeout(count,1000); } 
 
}
<div> <span>23</span>/ 30 </div> 
 

 
<button>reset</button>

0
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
var i = 24; 
var timer=setInterval(increment, 15000); 
function increment(){ 
if(i<=30) 
{ 
console.log(i); 
$('.increase').html('').append(i); 
i++; 
} 
else 
{ 
clearInterval(timer); 
} 
} 
</script> 
</head> 
<body> 
<div><span class="increase">23</span>/ 30 </div> 
</body> 
</html> 
0
<div id="show"></div> 

<script> 

function timer(){ 
    var i = 0; 
    setInterval(function(){ 
    i++; 
    document.getElementById("show").innerHTML = i; 
    if(i > 30){ 
     i = 0; 
    } 
    },1000); 
} 
timer(); 
</script> 

//只是超级简单,希望可以启发做感谢