Javascript 如何对同一HTML多次使用相同的JS

我使用了另一个stackoverflow问题：创建圆形进度条

除非我尝试创建多个1，否则不会发生任何事情。如果不复制JavaScript并仅更改1个变量，您如何清理并修复此问题

这是我的代码：

.circleWrapper{
宽度：250px；
浮动：左；
}
.circleText{}.circleTextSmall{}图div{
位置：相对位置；
利润率：80px；
宽度：220px；
高度：220px；
}
#图形画布{
显示：块；
排名：0；
左：0；
}
#图幅{
颜色：#555；
显示：块；
线高：220px；
文本对齐：居中；
宽度：220px；
字体系列：无衬线；
字体大小：40px；
字号：100；
左边距：5px；
}
#图形输入{
宽度：200px；
}

HTML/CSS
小文本
PHP
小文本

您已经使用了

图形

ID两次。 每个文档只能使用一次ID

id属性为HTML元素指定一个唯一的id（该值在HTML文档中必须是唯一的）

有关这方面的更多信息，请参见

将ID更改为其他内容，并将JS更改为与这两个元素交互

例如，可以使用

getElementsByClassName（）

完成此操作。此函数返回一个元素数组，而不是单个元素

我认为最好将所有功能包装在具有以下签名的函数中：

function startGraph(el) {
    ...
}

然后从这个for循环调用函数：

var elements = document.getElementsByClassName("chart");
var i;
for (i = 0; i < x.length; i++) {
    startGraph(elements[i]);
}

var elements=document.getElementsByClassName（“图表”）；
var i；
对于（i=0；i

有关这方面的更多信息，请参见。

使用函数 将代码放在一个函数中，该函数接受某种识别特定元素的方法，然后多次调用该函数。作为一个工作示例：

function startGraph(el) { // turn it into a function which accepts an element
  
  // (Nothing else has changed)
  var options = {
      percent:  el.getAttribute('data-percent') || 25,
      size: el.getAttribute('data-size') || 220,
      lineWidth: el.getAttribute('data-line') || 15,
      rotate: el.getAttribute('data-rotate') || 0
  }

  var canvas = document.createElement('canvas');
  var span = document.createElement('span');
  span.textContent = options.percent + '%';

  if (typeof(G_vmlCanvasManager) !== 'undefined') {
      G_vmlCanvasManager.initElement(canvas);
  }

  var ctx = canvas.getContext('2d');
  canvas.width = canvas.height = options.size;

  el.appendChild(span);
  el.appendChild(canvas);

  ctx.translate(options.size / 2, options.size / 2); // change center
  ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

  //imd = ctx.getImageData(0, 0, 240, 240);
  var radius = (options.size - options.lineWidth) / 2;

  var drawCircle = function(color, lineWidth, percent) {
      percent = Math.min(Math.max(0, percent || 1), 1);
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
      ctx.strokeStyle = color;
          ctx.lineCap = 'round'; // butt, round or square
      ctx.lineWidth = lineWidth
      ctx.stroke();
  };

  drawCircle('#efefef', options.lineWidth, 100 / 100);
  drawCircle('#555555', options.lineWidth, options.percent / 100);
}

假设每个元素都有

class=“chart”

，则可以获取所有元素并使用每个元素调用函数：

// Get all charts:
var myCharts=document.getElementsByClassName("chart");

// For each one..
for (var i in myCharts) {
   // Start it:
   startGraph(myCharts[i]);
}

var els=document.getElementsByClassName（“图表”）；
对于（变量i=0；i

div{
位置：相对位置；
利润率：80px；
宽度：220px；高度：220px；
}
帆布{
显示：块；
位置：绝对位置；
排名：0；
左：0；
}
跨度{
颜色：#555；
显示：块；
线高：220px；
文本对齐：居中；
宽度：220px；
字体系列：无衬线；
字体大小：40px；
字号：100；
左边距：5px；
}
输入{
宽度：200px；
}
跨度{
}

---

您需要做的就是在

HTML

中定义唯一的ID，并定义一个包含所有图形元素的数组并在逻辑中循环，请参见以下示例：

var元素=[{
“id”：“graph1”
}, {
“id”：“graph2”
}];
对于（var i=0；i

div{
位置：相对位置；
利润率：80px；
宽度：220px；
高度：220px；
}
帆布{
显示：块；
位置：绝对位置；
排名：0；
左：0；
}
跨度{
颜色：#555；
显示：块；
线高：220px；
文本对齐：居中；
宽度：220px；
字体系列：无衬线；
字体大小：40px；
字号：100；
左边距：5px；
}
输入{
宽度：200px；
}
span{}

请阅读。依赖于ex的问题