具有特定计时器值的数字的增量值

Question

我试过并环顾四周，但找不到类似的东西。

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

我的想法是，我希望 23 每 15 秒增加 1 个值。

并且当它达到30时，它将停止计数。我不知道如何让它 "stop" 计数以及我应该如何处理这样的问题。

如有任何帮助，我们将不胜感激！

Answer 1

如果像这样将 class 添加到 span 元素中：

<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/

Answer 2

这是一个可能的解决方案，请注意，我在演示中每秒进行一次迭代，但您可以通过执行 setTimeout(count,15000); 来降低速率。

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>

Answer 3

<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>

Answer 4

    <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>

//就是超级简单希望能有所启发谢谢

具有特定计时器值的数字的增量值

increment value of a number with a specific timer-value

javascript

jquery

timer

increment