Question

我用javascript并不是那么好，我发现这个完美的小提琴我想在这里使用：

我遇到的问题是我试图让它持续十分钟。

我已经尝试过调整代码，但我不能让它成为10分钟。我非常感谢所有可以提供帮助的人。

这是Javascript：

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 40);
    }
    $bar.text($bar.width() / 4 + "%");
}, 800);

非常感谢

Answer 1

版本1（不太可靠，请参阅@ flup的评论）

要考虑的一些事情

您希望您的进度需要10分钟，即600秒或600.000毫秒。

1000 * 60 * 10 = 600.000

当您的条宽为400px（100％）时，您最多可以执行400步（没有比1px更小的单位）

所以，如果我划分600.000ms / 400步，我得到1500ms，这意味着我应该每1.5s加一个像素。这听起来不错。

600.000 / 400 = 1500

会产生如下代码：

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 1); // add only 1px per step
    }
    $bar.text($bar.width() / 4 + "%");

}, 1500); // wait 1500ms per step

修改的

版本2

讨论结果（感谢@flup）可能是最可靠的版本（如果你想尽可能准确地达到10分钟）：

var mins = 10; //change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;
var finishedTS = (new Date()).getTime() + tenMinsInMillis;
var $bar = $('.bar');
var progressInterval = 1000;
var now, remaining, pWidth;

var setBar = function (pWidth) {
    $bar.width(pWidth + '%');
    $bar.text(Math.floor(pWidth) + "%");
};

var progress = setInterval(function () {
    now = (new Date()).getTime();
    remaining = finishedTS - now;
    pWidth = 100 - (remaining * 100 / tenMinsInMillis);

    setBar(pWidth);

    if (remaining < progressInterval) {
        clearInterval(progress);
        setTimeout(function () {
          setBar(100);
          $('.progress').removeClass('active');
        }, remaining);
    }

}, progressInterval);

http://jsfiddle.net/jLu8S/1/

（注意，我将持续时间（var mins）设置为1分钟，你不必在小提琴中等待10分钟......）

Answer 2

检查 this ！

var date = (new Date()).getTime();
var mins = 10;//change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;

var progress = setInterval(function () {
    var $bar = $('.bar');
    var now = (new Date()).getTime();
    var elapsed = now - date;
    var pWidth = (elapsed / tenMinsInMillis) * 100;
    if (elapsed >= tenMinsInMillis) {
        clearInterval(progress);
        $bar.width('100%');
        pWidth = 100;
        $('.progress').removeClass('active');
    } else {
        $bar.width(pWidth + '%');
    }
    $bar.text(Math.floor(pWidth) + "%");
}, 1000);

Answer 3

试试这个小提琴：http://jsfiddle.net/8F492/1/

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 0.66666666666);
    }
    $bar.text($bar.width() / 4 + "%");
}, 1000);

我让它每秒运行一次，总宽度为400，所以我把它除以600（因为在10分钟内有600秒），这给了我0.66666666666。我把它增加了0.66666666666，它看起来应该算上十分钟。

页面加载时的Javascript计时问题 - 以及引导进度条

3 个答案: