Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/418.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 同一页面上有多个js进度条?_Javascript_Jquery_Arrays_Oop_Progress Bar - Fatal编程技术网

Javascript 同一页面上有多个js进度条?

Javascript 同一页面上有多个js进度条?,javascript,jquery,arrays,oop,progress-bar,Javascript,Jquery,Arrays,Oop,Progress Bar,我正在使用progressbar.js进行一个项目,我希望在我的页面上有多个进度条。有一个动态量,所以我不知道提前多少进度条,我将在页面上 我只是复制了代码,并给了第二个progressbar一个.progress2类。理想情况下,我想让progressbar为每个元素工作,只需给它一个.progress类 显然,我想我应该先收集这些值,然后把它们放到一个数组中,但我甚至不能让它工作。有人能给我一个正确的方向,因为我不太擅长javascript 如果有人能看一看,告诉我这是否能按我所希望的方式

我正在使用progressbar.js进行一个项目,我希望在我的页面上有多个进度条。有一个动态量,所以我不知道提前多少进度条,我将在页面上

我只是复制了代码,并给了第二个progressbar一个.progress2类。理想情况下,我想让progressbar为每个元素工作,只需给它一个.progress

显然,我想我应该先收集这些值,然后把它们放到一个数组中,但我甚至不能让它工作。有人能给我一个正确的方向,因为我不太擅长javascript

如果有人能看一看,告诉我这是否能按我所希望的方式完成,我将不胜感激。

晚上,斯蒂芬

我想这就是你想要的:

看到了吗?没什么大不了的!:-)


注:我相信,这是可以改进的。

你是我的英雄:)这么简单,却又这么有效。不客气,下次你不会被卡住,这才是最重要的!:)
var circle = new ProgressBar.Circle('.progress', {
    color: startColor,
    easing: 'linear',
    strokeWidth: 8,
    duration: 1500,
    text: {
        value: '0'
    }
});
$('.progress').each(function() {
    var circle = new ProgressBar.Circle(this, {
        color: startColor,
        easing: 'linear',
        strokeWidth: 8,
        duration: 1500,
        text: {
            value: '0'
        }
    });

    var value = ($(this).attr('value') / 100);

    circle.animate(value, {
        from: {
            color: startColor
        },
        to: {
            color: endColor
        },
        step: function(state, circle, bar) {
            circle.path.setAttribute('stroke', state.color);
            console.log(circle);
            circle.setText((circle.value() * 100).toFixed(0));
        }
    });
});