Javascript 如何在一个页面上获取此元素的多个（w/codepen）_Javascript_Html_Css_Codepen

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

javascript html css

Javascript 如何在一个页面上获取此元素的多个（w/codepen）,javascript,html,css,codepen,Javascript,Html,Css,Codepen,我现在正在创建一个网站（自定义一个主题），我想在一个页面上使用这个元素（）因为我没有太多的html和css知识（足够定制一点），所以我不能让它让我在一个页面上使用多个我只想让他们中的三个挨在一起试着定制一下，听说了一些关于孩子的事情，但不知道自己怎么做这是html，rest位于codpen链接上： <html> <body> <div class="wrapper"> <div class="container chart

我现在正在创建一个网站（自定义一个主题），我想在一个页面上使用这个元素（）

因为我没有太多的html和css知识（足够定制一点），所以我不能让它让我在一个页面上使用多个

我只想让他们中的三个挨在一起

试着定制一下，听说了一些关于孩子的事情，但不知道自己怎么做

这是html，rest位于codpen链接上：

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

非常感谢您的帮助：）

首先，您需要将图表的HTML

元素克隆两次，这样总共有三个刻度盘：

<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">

…为

.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();

所有这些都可以从以下内容中看出：

//
//图书馆
//
变量拨号=功能（容器）{
this.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；
这是svg；
这个.defs；
这个切片；
这是一个叠加；
本文；
这个箭头；
这个。create（）；
}
Dial.prototype.create=函数（）{
这个.createSvg（）；
这个.createDefs（）；
这个.createSlice（）；
这个.createOverlay（）；
这个.createText（）；
这个.createArrow（）；
this.container.appendChild（this.svg）；
};
Dial.prototype.createSvg=函数（）{
var svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
setAttribute（'width'，this.size+'px'）；
setAttribute（'height'，this.size+'px'）；
this.svg=svg；
};
Dial.prototype.createDefs=函数（）{
var defs=document.createElements（“http://www.w3.org/2000/svg“，“defs”）；
var linearGradient=document.createElements（“http://www.w3.org/2000/svg“，”线性梯度“）；
linearGradient.setAttribute（'id'，'gradient'）；
var stop1=document.createElements（“http://www.w3.org/2000/svg“，”停止“）；
stop1.setAttribute（'stop-color'，'#6E4AE2'）；
stop1.setAttribute（'offset'，'0%'）；
linearGradient.appendChild（stop1）；
var stop2=document.createElements（“http://www.w3.org/2000/svg“，”停止“）；
stop2.setAttribute（'stop-color'，'#78F8EC'）；
stop2.setAttribute（'offset'，'100%'）；
linearGradient.appendChild（stop2）；
变量linearGradientBackground=document.createElements（“http://www.w3.org/2000/svg“，”线性梯度“）；
linearGradientBackground.setAttribute（'id'，'GradientBackground'）；
var stop1=document.createElements（“http://www.w3.org/2000/svg“，”停止“）；
stop1.setAttribute（'stop-color'，'rgba（0,0,0,0.2'）；
stop1.setAttribute（'offset'，'0%'）；
linearGradientBackground.appendChild（stop1）；
var stop2=document.createElements（“http://www.w3.org/2000/svg“，”停止“）；
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=函数（）{
var slice=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
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=切片；
};
Dial.prototype.createOverlay=函数（）{
var r=this.size-（this.size/2）-this.strokeWidth/2；
var circle=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
circle.setAttribute（'cx'，this.size/2）；
circle.setAttribute（'cy'，this.size/2）；
circle.setAttribute（'r'，r）；
circle.setAttribute（'fill'，'url（#渐变背景）'）；
this.svg.appendChild（圆）；
这个叠加=圆；
};
Dial.prototype.createText=函数（）{
var fontSize=this.size/3.5；
var text=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
text.setAttribute（'x'，（this.size/2）+fontSize/7.5）；
text.setAttribute（'y'，（this.size/2）+fontSize/4）；
setAttribute（'font-family'，'Century-Gothic，Lato'）；
text.setAttribute（'font-size'，fontSize）；
setAttribute（'fill'，'#78F8EC'）；
setAttribute（'text-anchor'，'middle'）；
var tspanSize=fontSize/3；
text.innerHTML=0+'%'；
this.svg.appendChild（文本）；
this.text=文本；
};
Dial.prototype.createArrow=函数（）{
var arrowSize=this.size/10；
var arrowYOffset，m；
如果（this.direction==='up'）{
箭头Y偏移=箭头大小/2；
m=-1；
}else if（this.direction==='down'）{
箭头偏移=0；
m=1；
}
var arrowPosX=（（this.size/2）-arrowSize/2）；
变量arrowPosY=（this.size-this.size/3）+arrowYOffset；
变量arrowDOffset=m*（arrowSize/1.5）；
var arrow=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
setAttribute（'d'，'m0'0'+arrowSize+'0'+arrowSize/2+''+arrowsoffset+'0z'）；
setAttribute（'fill'，'#97F8F0'）；
setAttribute（'opacity'，'0.6'）；
setAttribute（'transform'，'translate（'+arrowPosX+'，'+arrowPosY+'））；
this.svg.appendChild（箭头）；
这个箭头=箭头；
};
Dial.prototype.animateStart=函数（）{
var v=0；
var self=这个；
var intervalOne=setInterval（函数（）{
VarP=+（v/self.value）.toFixed（2）；
VarA=（p<0.95）？2-（2*p）：0.05；
v+=a；
//停止
如果（v>=+自身值）{
v=自我价值；
间隔时间（间隔时间）；
}
自身设定值（v）；
}, 10);
};
Dial.prototype.animateReset=函数（）{
该值为.setValue（0）；
};
Dial.prototype.polarToCartesian
var dial1 = new Dial(containers[0]);
dial1.animateStart();
var dial2 = new Dial(containers[1]);
dial2.animateStart();
var dial3 = new Dial(containers[2]);
dial3.animateStart();

<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>

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

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