[英]How to get more than one of this element on one page (w/ codepen)
我現在正在創建一個網站（自定義主題），並且希望在一頁上使用此元素（ https://codepen.io/ettrics/pen/qaXVAd ）。
由於我對html和css的了解不多（足以進行一些自定義），因此我無法在一個頁面上使用多個內容。
我只想要其中三個彼此相鄰。
嘗試過自定義一些，聽到了一些關於孩子的信息，但我自己不知道該怎么做。
那是html，其余的在codpen鏈接上：
<html>
<body>
<div class="wrapper">
<div class="container chart" data-size="400" data-value="88" data-arrow="up">
</div>
</div>
</body>
任何幫助是極大的贊賞 ：）
首先，您需要為圖形克隆兩次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 .wrapper為width: auto ，以便元素可以連續相鄰放置。
第三，您需要更改JavaScript：
var dial = new Dial(containers[0]);
dial.animateStart();
...為.chart索引1和2創建兩個新的.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();
所有這些都可以在下面看到：
// // 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>
如果您將標記更改為具有更多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();
如何從具有多個文檔 html 的 web 頁面中獲取元素的選擇器？
[英]How get the selector of an element from a web page with more than one document html?
如何讓這個jQuery腳本在多個元素上單獨運行
[英]How to get this jQuery script to run individually on more than one element
頁面上多個元素的css3過渡以及如何反向過渡
[英]css3 transitions for more than one element on a page and how to reverse transition
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.