Question

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

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

我的思考过程就是我想要每15秒增加1个值。

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

任何帮助将不胜感激！

Answer 1

这是一个可能的解决方案，请注意我每秒都会为演示进行一次迭代，但您可以通过执行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 2

如果将类添加到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 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>

//只是超级简单的希望可以灵感完成谢谢

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

4 个答案: