jquery - 圆形加载条

Question

我正在使用这个名为 Simple Circular Loading Bar with Percentage - Rotator 的 jQuery 插件 http://www.jqueryscript.net/rotator/Simple-jQuery-Circular-Loading-Bar-with-Percentage-Rotator.html

如何添加更多的div

这是一个 jsFiddle 示例 - http://jsfiddle.net/fegvc5h8/

$(window).load(function() {
  $("#rotator").rotator({
    starting: 0,
    ending: 100,
    percentage: true,
    color: 'green',
    lineWidth: 7,
    timer: 10,
    radius: 40,
    fontStyle: 'Calibri',
    fontSize: '20pt',
    fontColor: 'darkblue',
    backgroundColor: 'lightgray',
    callback: function() {}
  });
});

这是代码

Answer 1

是的，这是可能的。 http://jsfiddle.net/csdtesting/en83d3uu/

打开此脚本的 rotator.js 文件并更改代码如下。我通过使用 jquery 将“-random number”添加到 Canvas 元素 ID 来修复重复的 Canvas ID Math.random():

...
var n = Math.random();
this.empty().append("<canvas height ="+this.height() + " width="+this.width()+" id='my-canvas-"+n+"'/ ></canvas>");
var canvas = document.getElementById('my-canvas-'+n);

您可以通过向 html 添加具有不同 id 的 div 元素来添加任意数量的元素:

<div id="rotator" style="height:300px;width:300px"></div>
<div id="rotator2" style="height:300px;width:300px"></div>