我试图让#perc #perc值从0增加到每个svg中的值。
与http://builtbybuffalo.com/相似 - 在页面下方有一些统计数据。我试图用Javascript做它并且它不起作用，我可能会在早上不是2时再试一次......我离题了。
我是javascript / jquery的新手，所以对于该做什么以及为什么它不起作用的解释会很好
function changeText3() {
var oldHTML = document.getElementsByClassName('perc').innerHTML;
var intoldHTML = parseInt(oldHTML);
if (intoldHTML == 0) {
intoldHTML += 75;
}
return changeText3() + '%';
}
这是径向百分比圆圈的代码，里面的数字是我想从0开始的数字并增加到它们的值。
var dark = document.getElementsByClassName('dark');
var svg = document.getElementsByClassName('svg')[0];
var radius = svg.getBBox().width / 2;
var t = 0.5,
x = 0,
y = 0;
var theta = {
0: 0,
1: 0,
2: 0
};
var anims = {}
var maxTheta = calcTheta(document.getElementsByClassName('perc'));
for (i = 0; i < dark.length; i++) {
dark[i].setAttribute('transform', 'translate(' + radius + ',' + radius + ')');
}
function calcTheta(el) {
var jbo = {};
for (i = 0; i < el.length; i++) {
jbo[i] = (180 * parseInt(el[i].innerHTML.slice(0, -1), 10)) / 50;
}
return jbo;
}
var animOne = setInterval(function() {
theta[0] += 0.5;
var x = Math.sin(theta[0] * Math.PI / 180) * radius;
var y = Math.cos(theta[0] * Math.PI / 180) * -radius;
var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[0] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
dark[0].setAttribute('d', d);
if (theta[0] > maxTheta[0]) {
clearInterval(animOne);
}
}, t);
var animTwo = setInterval(function() {
theta[1] += 0.5;
var x = Math.sin(theta[1] * Math.PI / 180) * radius;
var y = Math.cos(theta[1] * Math.PI / 180) * -radius;
var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[1] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
dark[1].setAttribute('d', d);
if (theta[1] > maxTheta[1]) {
clearInterval(animTwo);
}
}, t);
var animThree = setInterval(function() {
theta[2] += 0.5;
var x = Math.sin(theta[2] * Math.PI / 180) * radius;
var y = Math.cos(theta[2] * Math.PI / 180) * -radius;
var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[2] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
dark[2].setAttribute('d', d);
if (theta[2] > maxTheta[2]) {
clearInterval(animThree);
}
}, t);<div id="container">
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">0%</text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">0%</text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">0%</text>
</svg>
</div>
答案 0 :(得分：0)
只需将perc[N].textContent = Math.round((theta[N]*50)/180) +'%';添加到具有全局animN
var perc = document.getElementsByClassName('perc');个功能中
var dark = document.getElementsByClassName('dark');
var perc= document.getElementsByClassName('perc');
var svg = document.getElementsByClassName('svg')[0];
var radius = svg.getBBox().width / 2;
var t = 0.5,
x = 0,
y = 0;
var theta = {
0: 0,
1: 0,
2: 0
};
var anims = {}
var maxTheta = calcTheta(perc);
for (i = 0; i < dark.length; i++) {
dark[i].setAttribute('transform', 'translate(' + radius + ',' + radius + ')');
}
function calcTheta(el) {
var jbo = {};
for (i = 0; i < el.length; i++) {
jbo[i] = (180 * parseInt(el[i].innerHTML.slice(0, -1), 10)) / 50;
}
return jbo;
}
var animOne = setInterval(function() {
theta[0] += 0.5;
var x = Math.sin(theta[0] * Math.PI / 180) * radius;
var y = Math.cos(theta[0] * Math.PI / 180) * -radius;
var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[0] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
dark[0].setAttribute('d', d);
perc[0].textContent = Math.round((theta[0]*50)/180) +'%';
if (theta[0] > maxTheta[0]) {
clearInterval(animOne);
}
}, t);
var animTwo = setInterval(function() {
theta[1] += 0.5;
console.log(theta[1]);
var x = Math.sin(theta[1] * Math.PI / 180) * radius;
var y = Math.cos(theta[1] * Math.PI / 180) * -radius;
var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[1] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
dark[1].setAttribute('d', d);
perc[1].textContent = Math.round((theta[1]*50)/180) +'%';
if (theta[1] > maxTheta[1]) {
clearInterval(animTwo);
}
}, t);
var animThree = setInterval(function() {
theta[2] += 0.5;
var x = Math.sin(theta[2] * Math.PI / 180) * radius;
var y = Math.cos(theta[2] * Math.PI / 180) * -radius;
var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[2] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
dark[2].setAttribute('d', d);
perc[2].textContent = Math.round((theta[2]*50)/180) +'%';
if (theta[2] > maxTheta[2]) {
clearInterval(animThree);
}
}, t);<div id="container">
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">75%</text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">9%</text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">95%</text>
</svg>
</div>
修改
我重构了你的功能，以避免锅炉板，并能够添加尽可能多的svg：
var dark, perc, svg, radius;
var t = 0.5, step = 0.5, x = 0, y = 0;
var maxTheta = [], theta=[];
function init(){
dark = document.getElementsByClassName('dark');
perc = document.getElementsByClassName('perc');
svg = document.getElementsByClassName('svg')[0];
radius = svg.getBBox().width / 2;
for(i=0; i<perc.length; i++){
dark[i].setAttribute('transform', 'translate(' + radius + ',' + radius + ')');
maxTheta[i] = (180 * perc[i].getAttribute('data-perc')) / 50;
theta[i] = 0;
anim(i);
}
}
var anims = [];
function anim(n) {
anims[n] = setInterval(function() {
theta[n] += step;
var x = Math.sin(theta[n] * Math.PI / 180) * radius;
var y = Math.cos(theta[n] * Math.PI / 180) * -radius;
var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[n] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
dark[n].setAttribute('d', d);
perc[n].textContent = Math.round((theta[n]*50)/180) +'%';
if (theta[n] > maxTheta[n]) clearInterval(anims[n]);
},t);
}
init();<div id="container">
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle" data-perc="75"></text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle" data-perc="9"></text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle" data-perc="95"></text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle" data-perc="66"></text>
</svg>
<svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
<path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
<path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
<path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
<text class="perc" x="70" y="79" font-size="2em" text-anchor="middle" data-perc="55"></text>
</svg>
</div>