如何在一页上获取多个元素（w/codepen）

Question

我现在正在创建一个网站（自定义主题），我想在一个页面上使用这个元素 (https://codepen.io/ettrics/pen/qaXVAd)。

由于我对 html 和 css 了解不多（足以自定义一点）我无法让它让我在一页上使用多个。

我只想要其中 3 个并排。

尝试了一些定制，听说过一些关于儿童的事情，但我自己不知道如何做。

那就是 html，剩下的就在 codpen link:

<html>
<body>
    <div class="wrapper">
        <div class="container chart" data-size="400" data-value="88" data-arrow="up">
        </div>
    </div>
</body>

非常感谢任何帮助:)

Answer 1

首先，您需要将图表的 HTML <div> 元素复制两次，这样总共有三个表盘：

<div class="container chart" data-size="400" data-value="88" data-arrow="up">
<div class="container chart" data-size="400" data-value="88" data-arrow="up">
<div class="container chart" data-size="400" data-value="88" data-arrow="up">

其次，您需要将 .wrapper 上的 width: 400px 更改为 width: auto，这样元素就可以并排放置。

第三，您需要更改 JavaScript:

var dial = new Dial(containers[0]);
dial.animateStart();

...为 .chart 索引 1 和 2.

创建两个新的表盘元素

这可以作为一个循环来完成，但最简单的方法是：

var dial1 = new Dial(containers[0]);
dial1.animateStart();
var dial2 = new Dial(containers[1]);
dial2.animateStart();
var dial3 = new Dial(containers[2]);
dial3.animateStart();

所有这些都可以在下面看到：

//
// Library
//

var Dial = function(container) {
  this.container = container;
  this.size = this.container.dataset.size;
  this.strokeWidth = this.size / 8;
  this.radius = (this.size / 2) - (this.strokeWidth / 2);
  this.value = this.container.dataset.value;
  this.direction = this.container.dataset.arrow;
  this.svg;
  this.defs;
  this.slice;
  this.overlay;
  this.text;
  this.arrow;
  this.create();
}

Dial.prototype.create = function() {
  this.createSvg();
  this.createDefs();
  this.createSlice();
  this.createOverlay();
  this.createText();
  this.createArrow();
  this.container.appendChild(this.svg);
};

Dial.prototype.createSvg = function() {
  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute('width', this.size + 'px');
  svg.setAttribute('height', this.size + 'px');
  this.svg = svg;
};

Dial.prototype.createDefs = function() {
  var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
  var linearGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
  linearGradient.setAttribute('id', 'gradient');
  var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  stop1.setAttribute('stop-color', '#6E4AE2');
  stop1.setAttribute('offset', '0%');
  linearGradient.appendChild(stop1);
  var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  stop2.setAttribute('stop-color', '#78F8EC');
  stop2.setAttribute('offset', '100%');
  linearGradient.appendChild(stop2);
  var linearGradientBackground = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
  linearGradientBackground.setAttribute('id', 'gradient-background');
  var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  stop1.setAttribute('stop-color', 'rgba(0, 0, 0, 0.2)');
  stop1.setAttribute('offset', '0%');
  linearGradientBackground.appendChild(stop1);
  var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  stop2.setAttribute('stop-color', 'rgba(0, 0, 0, 0.05)');
  stop2.setAttribute('offset', '100%');
  linearGradientBackground.appendChild(stop2);
  defs.appendChild(linearGradient);
  defs.appendChild(linearGradientBackground);
  this.svg.appendChild(defs);
  this.defs = defs;
};

Dial.prototype.createSlice = function() {
  var slice = document.createElementNS("http://www.w3.org/2000/svg", "path");
  slice.setAttribute('fill', 'none');
  slice.setAttribute('stroke', 'url(#gradient)');
  slice.setAttribute('stroke-width', this.strokeWidth);
  slice.setAttribute('transform', 'translate(' + this.strokeWidth / 2 + ',' + this.strokeWidth / 2 + ')');
  slice.setAttribute('class', 'animate-draw');
  this.svg.appendChild(slice);
  this.slice = slice;
};

Dial.prototype.createOverlay = function() {
  var r = this.size - (this.size / 2) - this.strokeWidth / 2;
  var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  circle.setAttribute('cx', this.size / 2);
  circle.setAttribute('cy', this.size / 2);
  circle.setAttribute('r', r);
  circle.setAttribute('fill', 'url(#gradient-background)');
  this.svg.appendChild(circle);
  this.overlay = circle;
};

Dial.prototype.createText = function() {
  var fontSize = this.size / 3.5;
  var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
  text.setAttribute('x', (this.size / 2) + fontSize / 7.5);
  text.setAttribute('y', (this.size / 2) + fontSize / 4);
  text.setAttribute('font-family', 'Century Gothic, Lato');
  text.setAttribute('font-size', fontSize);
  text.setAttribute('fill', '#78F8EC');
  text.setAttribute('text-anchor', 'middle');
  var tspanSize = fontSize / 3;
  text.innerHTML = 0 + '<tspan font-size="' + tspanSize + '" dy="' + -tspanSize * 1.2 + '">%</tspan>';
  this.svg.appendChild(text);
  this.text = text;
};

Dial.prototype.createArrow = function() {
  var arrowSize = this.size / 10;
  var arrowYOffset, m;
  if (this.direction === 'up') {
    arrowYOffset = arrowSize / 2;
    m = -1;
  } else if (this.direction === 'down') {
    arrowYOffset = 0;
    m = 1;
  }
  var arrowPosX = ((this.size / 2) - arrowSize / 2);
  var arrowPosY = (this.size - this.size / 3) + arrowYOffset;
  var arrowDOffset = m * (arrowSize / 1.5);
  var arrow = document.createElementNS("http://www.w3.org/2000/svg", "path");
  arrow.setAttribute('d', 'M 0 0 ' + arrowSize + ' 0 ' + arrowSize / 2 + ' ' + arrowDOffset + ' 0 0 Z');
  arrow.setAttribute('fill', '#97F8F0');
  arrow.setAttribute('opacity', '0.6');
  arrow.setAttribute('transform', 'translate(' + arrowPosX + ',' + arrowPosY + ')');
  this.svg.appendChild(arrow);
  this.arrow = arrow;
};

Dial.prototype.animateStart = function() {
  var v = 0;
  var self = this;
  var intervalOne = setInterval(function() {
    var p = +(v / self.value).toFixed(2);
    var a = (p < 0.95) ? 2 - (2 * p) : 0.05;
    v += a;
    // Stop
    if (v >= +self.value) {
      v = self.value;
      clearInterval(intervalOne);
    }
    self.setValue(v);
  }, 10);
};

Dial.prototype.animateReset = function() {
  this.setValue(0);
};

Dial.prototype.polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

Dial.prototype.describeArc = function(x, y, radius, startAngle, endAngle) {
  var start = this.polarToCartesian(x, y, radius, endAngle);
  var end = this.polarToCartesian(x, y, radius, startAngle);
  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");
  return d;
}

Dial.prototype.setValue = function(value) {
  var c = (value / 100) * 360;
  if (c === 360)
    c = 359.99;
  var xy = this.size / 2 - this.strokeWidth / 2;
  var d = this.describeArc(xy, xy, xy, 180, 180 + c);
  this.slice.setAttribute('d', d);
  var tspanSize = (this.size / 3.5) / 3;
  this.text.innerHTML = Math.floor(value) + '<tspan font-size="' + tspanSize + '" dy="' + -tspanSize * 1.2 + '">%</tspan>';
};

//
// Usage
//

var containers = document.getElementsByClassName("chart");
var dial1 = new Dial(containers[0]);
dial1.animateStart();
var dial2 = new Dial(containers[1]);
dial2.animateStart();
var dial3 = new Dial(containers[2]);
dial3.animateStart();

body {
  background: #18222F;
}

.wrapper {
  position: absolute;
  width: auto;
  height: 400px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
}

.container {
  flex: 1;
  padding: 0 20px;
}

<html>

<body>
  <div class="wrapper">
    <div class="container chart" data-size="400" data-value="88" data-arrow="down">
    </div>
    <div class="container chart" data-size="400" data-value="88" data-arrow="up">
    </div>
    <div class="container chart" data-size="400" data-value="88" data-arrow="up">
    </div>
  </div>
</body>

</html>

Answer 2

如果您更改标记以包含更多 container 个 div，例如：

<div class="wrapper">
  <div class="container chart" data-size="400" data-value="88" data-arrow="up"></div>
  <div class="container chart" data-size="400" data-value="88" data-arrow="up"></div>
  <div class="container chart" data-size="400" data-value="88" data-arrow="up"></div>
</div>

...然后选择容器的代码会将它们添加到 containers 列表中，您可以像在第一个容器中那样将刻度盘放入其中（并为刻度盘设置动画），例如:

var dial = new Dial(containers[0]);
var dial2 = new Dial(containers[1]);
var dial3 = new Dial(containers[2]);

dial.animateStart();
dial2.animateStart();
dial3.animateStart();

如何在一页上获取多个元素（w/codepen）

How to get more than one of this element on one page (w/ codepen)

html

javascript

css

codepen