使用svg画一个进度条

最新推荐文章于 2024-06-26 09:47:01 发布

百度一下吧

最新推荐文章于 2024-06-26 09:47:01 发布

阅读量296

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_45393395/article/details/127426106

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .roate-text {
            text-anchor: middle;
            dominant-baseline: middle;
        }
        body {
            text-align: center;
            background: #edca69;
        }
    </style>
</head>
<body>

<svg width="700" height="700"version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="350" cy="350" r="300" stroke="black" stroke-width="20" fill="none"/>
    <circle class="progress" transform="rotate(-90,350,350)" cx="350" cy="350" r="300" stroke="white" stroke-width="20" fill="none" stroke-linecap="round" stroke-dasharray="0,10000" />
    <text class="roate-text" x="350" y="350" font-size="200" fill="red">0</text>
</svg>
<script>
    var progressDom = document.querySelector(".progress");
    var texDom = document.querySelector(".roate-text");
    function rotateCircle(persent) {
      var circleLength = Math.floor(2 * Math.PI * parseFloat(progressDom.getAttribute("r")));
      var value = persent * circleLength/100;
      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})`);
      texDom.innerHTML = persent+'%';
      texDom.setAttribute("fill", `rgb(${red},${green},${blue})`)
    }
    var num = 0;
    setInterval(() => {
      num++;
      if(num > 100) {
        num = 0;
      }
      rotateCircle(num);
    }, 100)
</script>
</body>
</html>