Question

我想使用这一个脚本为所有三个圆圈制作动画。但要实现这一点，我需要创建3个变量，如'c1'对吗？

我通过复制一切来获得代码： http://jsfiddle.net/JwkYm/339/ 它必须比这更容易。感谢您的帮助。

(function () {
    // math trick 2*pi*57 = 358, must be less than 360 degree 
    var circleArr = ['orange-halo','orange-halo2','orange-halo3'];
    var myTimerArr = ['myTimer','myTimer2','myTimer3'];
    var interval = 30;
    var angle = [0,0,0];
    var angle_increment = 6;

    var c1 = setInterval(function () {
        
        var x = 0;
        
        while(x >= 2)
        {
        	document.getElementById(circleArr[x]).setAttribute("stroke-dasharray", angle[x] + ", 20000");
          document.getElementById(myTimerArr[x]).innerHTML = parseInt(angle[x]/360*100) + '%';
          
          if (angle[x] >= 270) 
          {
            c1.clearInterval(c1.timer);
        	}
          
        	angle[x] += angle_increment;
          x++;
        }      
    }.bind(this), interval);

#myTimer, #myTimer2, #myTimer3 {
  fill: #000099; 
  font-size: 40px; 
  font-family: Myriad light;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
    <circle cx="100" cy="100" r="73" id="blue-halo" fill="none" stroke="#000099" stroke-width="30" />
    <circle cx="100" cy="100" r="73" id="orange-halo" fill="none" stroke="#FD6400" stroke-width="31" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
    <text id="myTimer" text-anchor="middle" x="100" y="110">0%</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
    <circle cx="100" cy="100" r="73" id="blue-halo2" fill="none" stroke="#000099" stroke-width="30" />
    <circle cx="100" cy="100" r="73" id="orange-halo2" fill="none" stroke="#FD6400" stroke-width="31" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
    <text id="myTimer2" text-anchor="middle" x="100" y="110">0%</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
    <circle cx="100" cy="100" r="73" id="blue-halo2" fill="none" stroke="#000099" stroke-width="30" />
    <circle cx="100" cy="100" r="73" id="orange-halo2" fill="none" stroke="#FD6400" stroke-width="31" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
    <text id="myTimer3" text-anchor="middle" x="100" y="110">0%</text>
</svg>

http://jsfiddle.net/JwkYm/341/

使用数组的多个setInterval（）

0 个答案: