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

只是一个快速的猜测，但尝试这样的事情（我在工作，不能测试自己，heheh）

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：

<强> EXAMPLE

<强> 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);    
});

如何使这个慢jQuery计数器

4 个答案: