如何使其成为慢速jQuery计数器

Question

我目前正忙于建立一个新网站。 我想在我的网站上创建一个计数器，向访问者显示我创建了多少个网站。 我目前正在使用Javascript和jQuery来做到这一点。 唯一的问题是，在使用for循环时，结果显示非常快，我希望它计数缓慢。 这是我到目前为止的代码：

$(document).ready(function() {

    var websites = 10;
    for (var i=0;i<websites;i++)
    {
        $('.webcounter').html(i);
    }
});

任何人都有使计数器变慢的想法吗？

Answer 1

您可以尝试以下方法：

var interval = window.setInterval(func, delay[, param1, param2, ...]);

Answer 2

只是一个快速的猜测，但是尝试这样的事情（我在工作，无法自我测试，嘿嘿）

var websites = 10, tmrSiteCount;

function siteCount(i) {
    if (i <= websites) {
        $('.webcounter').html(i);
        tmrSiteCount = setTimeout(function() { siteCount(i++); }, 1000);
    }
    else {
        clearTimeout(tmrSiteCount);
    };
}

$(document).ready(function() {
    tmrSiteCount = setTimeout(function() { siteCount(1); });
})

Answer 3

此计时器的工作时间为几秒钟，您可以在else部分中放置完成后即可运行代码：

使用Javascript

function countdown(count){

    $('.webcounter').html(count);

    count -= 1;

    if(count >= 0)
        setTimeout("countdown("+count+")", 1000);
    else
        alert("Countdown Complete");
}

$(document).ready(function() {

    countdown(10);
}

HTML

<div class="webcounter">Webcounter Holder</div>​

演示

http://jsfiddle.net/silver89/SBXAQ/8/

Answer 4

使用setInterval ：

例

HTML

​<div class="websites">0</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​

JQUERY

$(document).ready(function() {
    var websites = 10;
    var counter = 1;
    var id = setInterval(function(){ 
        $('.websites').text(counter);
        counter++;
        if(counter > websites){ clearInterval(id);}
    }, 500);    
});​