SVG实现多彩圆环倒计时效果的示例代码

var perimeter=Math.PI*2*170;
var circleInit=function(){
if(eleCircles[1]){
eleCircles[1].setAttribute("stroke-dasharray","1069 1069")
}
if(eleCircles[2]){
eleCircles[2].setAttribute("stroke-dasharray",perimeter/2+" 1069")
}
eleTimeSec.innerHTML=""
};
var timerTimeCount=null;
var fnTimeCount=function(b){
if(timerTimeCount){
return
}
var b=b||10;
var a=function(){
var c=b/10;
if(eleCircles[1]){
eleCircles[1].setAttribute("stroke-dasharray",perimeter*c+" 1069")
}
if(eleCircles[2]&&b<=5){
eleCircles[2].setAttribute("stroke-dasharray",perimeter*c+" 1069")
}
if(eleTimeSec){
eleTimeSec.innerHTML=b
}
b--;
if(b<0){
clearInterval(timerTimeCount);
timerTimeCount=null;
alert("时间到！");
circleInit()
}
};
a();
timerTimeCount=setInterval(a,1000)
};
fnTimeCount();

整个案例的代码非常少，有喜欢的朋友可以将代码保存到html中，运行一下，体验体验实际效果。