我试过并环视四周,但找不到任何类似的东西。增加具有特定计时器值的数字的值
<div> <span>23</span>/ 30 </div>
我在这里的思考过程是我希望23每15秒增加一个值。
当它达到30时,它将停止计数。我不知道如何让它“停止”计数,以及我应该如何处理这样的问题。
任何帮助将不胜感激!
我试过并环视四周,但找不到任何类似的东西。增加具有特定计时器值的数字的值
<div> <span>23</span>/ 30 </div>
我在这里的思考过程是我希望23每15秒增加一个值。
当它达到30时,它将停止计数。我不知道如何让它“停止”计数,以及我应该如何处理这样的问题。
任何帮助将不胜感激!
如果一个类被添加到跨度元件像这样:
<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/
这是一个可能的解决方案,请注意,我会为演示每秒做一次迭代,但您可以通过做来降低速率。
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>
<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>
<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>
//只是超级简单,希望可以启发做感谢