<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{ margin: 0; font-family: "arial";}
#wrap{background: rgba(255, 0, 0, 0.38); 400px; height: 400px;}
</style>
<script>
window.onload = function(){
var svgSN = "http://www.w3.org/2000/svg";
var oWrap = document.getElementById("wrap");
var oSvg = document.getElementById("svg1");
function createTag(tag, objAttr){
var oTag = document.createElementNS(svgSN, tag);
for(var attr in objAttr){
oTag.setAttribute(attr, objAttr[attr]);
}
return oTag;
}
var outerXY = [{x: 80, y: 200}];
var innerXY = [{x: 130, y: 200}];
var centX = 200;
var centY = 200;
var outerR = 120;
var innerR = 70;
var angle = 360;
var agSum = 0;
var agNum = 0;
var timer = null;
var oText = createTag('text', {'x': centX, 'y': centY + 13, 'font-size': '30', 'text-anchor': 'middle', 'fill': '#fff', 'font-family': 'arial'});
oText.innerHTML = agNum + "%";
oSvg.appendChild(oText);
for(var i=0; i<angle; i++){
agSum++;
var outerX = centX - Math.cos(agSum * Math.PI / 180) * outerR;
var outerY = centY - Math.sin(agSum * Math.PI / 180) * outerR;
outerXY.push({x: outerX, y: outerY});
var innerX = centX - Math.cos(agSum * Math.PI / 180) * innerR;
var innerY = centY - Math.sin(agSum * Math.PI / 180) * innerR;
innerXY.push({x: innerX, y: innerY});
}
var oPath = createTag('path', {});
oSvg.appendChild(oPath);
var json = {};
timer = setInterval(function(){
agNum++;
json = {'fill': 'rgba(255, 255, 255, 0.6)', 'd': 'M' + outerXY[0].x + ' ' + outerXY[0].y + 'A' + outerR + ' ' + outerR + ' 0 ' + (agNum > 180 ? 1 : 0) + ' 1 ' + outerXY[agNum].x + ' ' + outerXY[agNum].y + 'L' + innerXY[agNum].x + ' ' + innerXY[agNum].y + 'A' + innerR + ' ' + innerR + ' 0 ' + (agNum > 180 ? 1 : 0) + ' 0 ' + innerXY[0].x + ' ' + innerXY[0].y + 'Z'};
for(var attr in json){
oPath.setAttribute(attr, json[attr]);
}
oText.innerHTML = Math.round(agNum/360 * 100) + "%";
if(agNum == agSum){
clearInterval(timer);
alert("记载完成, 跳转页面");
}
}, 20);
}
</script>
</head>
<body>
<div id="wrap">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
</svg>
</div>
</body>
</html>
效果展示：
