Question

使用jQuery progressbar.js插件我无法在任何特定点停止进度条。不幸的是，插件api没有解释如何执行此操作，但我尝试通过声明一个存储进度值的目标变量来自行完成。

 target = bar.value();

然后我尝试通过应用像这样的if条件来停止进度

if ((target * 100).toFixed(0) == 60) {
    circle.stop();
}

但这并没有停止60上的进度条！我试图根据circle.stop();函数使用它（如果你单击停止按钮它会停止progess并提示bar（目标）的值，但if stattement不工作！

var target;
var circle = new ProgressBar.Circle('#container', {
    color: '#FCB03C',
    strokeWidth: 3,
    trailWidth: 1,
    duration: 1500,
    bar: 60,
    text: {
        value: '0'
    },
    step: function (state, bar) {
        bar.setText((bar.value() * 100).toFixed(0));
        target = bar.value();
    }
});

circle.animate(1, function () {
    circle.animate();
})


if ((target * 100).toFixed(0) == 60) {
    circle.stop();
}


$('#stop').on('click', function () {
    circle.stop();
    alert((target * 100).toFixed(0));
});

你能告诉我我做错了什么以及如何解决这个问题？感谢

Answer 1

您的演示无法正常工作的原因是您只需在目标刚刚宣布时检查目标一次，没有任何价值。 (undefined * 100).toFixed(0) == "NaN"。由于javascript默认情况下不会被激活，因此每次target更新时都必须检查条件。 step函数非常适用于此，因为每次值更改时都会调用它。要修复错误，请移动：

if ((target * 100).toFixed(0) == 60) {
    circle.stop();
}

在step函数内：

step: function (state, bar) {
    bar.setText((bar.value() * 100).toFixed(0));
    target = bar.value();
    if ((target * 100).toFixed(0) == 60) {
        circle.stop();
    }
}

Fixed demo

在某些方面无法阻止进度条

1 个答案: