思路:
svg
兩個圓,一個爲進度條底色,一個爲進度條,使圓環內部填充顏色不可見,設置外部邊框線爲stroke-dasharray=‘0,xxx’和線寬; 即外邊框虛線,且初始時,實線爲0，虛線比實線大即可->傳入百分比進度即二位整數,動態增加實線的長度,虛線長度一定要比圓環長度長,否則會出現多段實線->在改變實現長度的過程中,通過
rgb的方式,將顏色的豎直和百分比綁定，字體顏色類似,實現進度條變色
精髓:通過圓形外邊框虛線的實線部分從0到有的過程，且空白初始佔滿圓環，且比圓環長度長
其中虛線的起始位置爲圓心水平向右的交點,可以通過transform="rotate(-90,圓心x,圓心y)"實現起點位置在頂部
代碼示例:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text{
text-align: center;
dominant-baseline:middle;
}
body{
text-align: center;
}
.box{
height: 700px;
width: 700px;
margin:0 auto;
}
</style>
</head>
<body>
<div style="border:solid 1px orange;" class='box'>
<svg id='svg' width='100%' height='100%'
xmlns="http://www.w3.org/2000/svg">
<!-- 設置底色的圓環 -->
<circle cx='350' cy='350' r='300' stroke='gray' fill='none' stroke-width='40' stroke-linecap='round'></circle>
<!-- 設置進度條 -->
<!-- 旋轉設置進度條從圓環上頂點開始，即按照圓心(350,350)逆時針旋轉90度 -->
<!--strok-dasharray='0,10000' 只要虛線空白比實現長即可 -->
<circle class='progress'
transform='rotate(-90,350,350)'
cx='350' cy='350' r='300' fill='none' stroke='red'
stroke-width='40' stroke-linecap='round' strok-dasharray='0,10000'
></circle>
<!-- 設置文本 -->
<text class='text' x='350' y='350' font-size='200' fill='red' text-anchor='middle'>0</text>
</svg>
</div>
<script src='js/index.js'></script>
<script>
window.onload=function(){
//命名空間
let svgNS="http://www.w3.org/2000/svg";
//獲取父級元素
var div=document.querySelector('.box');
//獲取svg
let svg=document.querySelector('#svg');
//創建標籤
function createTag(tag,obj){
var oTag=document.createElementNS(svgNS,tag);
for(var attr in obj){
oTag.setAttribute(attr,obj[attr]);
}
return oTag;
}
}
</script>
</body>
</html>
js:
//獲取進度條
var progressDom = document.querySelector(".progress");
//獲取文本對象
var textDom=document.querySelector('.text');
//進度條變化
function rotateCircle(persent){
//獲取svg圓環的總長,通過半徑長度算出總長
var circleLength=Math.floor(2*Math.PI*parseFloat(progressDom.getAttribute('r')));
//按照百分比算出進度環的長度
var value=persent*circleLength/100;
//根據百分比變換顏色
// 紅色255,0,0 藍色0,191,255 即從紅色變換成藍色
var red=255+parseInt((0-255)/100*persent);
var green=0+parseInt((191-0)/100*persent);
var blue=0+parseInt((255-0)/100*persent);
//設置虛線的路徑和(實線)顏色,空白長度必須比圓環長度長
progressDom.setAttribute('stroke-dasharray',value+",10000");
progressDom.setAttribute('stroke',`rgb(${red},${green},${blue})`);
//設置文本內容顏色
textDom.innerHTML=persent+'%';
textDom.setAttribute('fill',`rgb(${red},${green},${blue})`);
}
//定時器,每30毫秒百分比+1;百分比爲100時置0
let num=0;
setInterval(()=>{
num++;
if(num>100)
{
num=0;
}
rotateCircle(num);
},30)