【无标题】

qq_45660256

于 2024-07-03 21:12:57 发布

阅读量133

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45660256/article/details/140162482

版权

使用SVG实现一个环形进度条
html代码

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SVG</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
.text{
/*文本水平居中*/
text-align: middle;
dominant-baseline: middle;
}
body{text-align: center;}
</style>
  </head>

  <body>
  <svg xmlns="http://www.w3.org/200/svg" width="700" height="700">
    <!-- 设置底色圆环 -->
    <circle cx="350" cy="350" r="300" fill="none" stroke="grey" stroke-width="40"  stroke-linecap="round" />
     <!-- stroke-linecap="round"  表示圆的端点为圆形 -->
    <!-- 设置进度条 -->
     <circle class="progress" transform="rotate(-90,350,350)"
      cx="350" cy="350" r="300" fill="none" stroke="red" stroke-width="40"  stroke-linecap="round"  stroke-dasharray="0,10000" />
      <!-- stroke-dasharray 一个表示长度 一个表示间距 -->
       <!-- 设置文本 -->
        <text class="text" x="170" y="350" font-size="200" fill="red"
        >36</text>
  </svg>

    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

JS 代码

// 获取进度条circle 对象
let progressDom = document.querySelector('.progress');
// 获取文本对象
let textDom = document.querySelector('.text');
function rotatecircle(persent) {
  //获取svg圆形环的总长，通过获取半径长度算出总长
  var circlelength = Math.floor(2 * Math.PI * parseFloat(progressDom.getAttribute('r')));
  //按照百分比。算出进度环的长度
  var value = persent * circlelength / 100;
  //红色是RGB,255,0,0
  //蓝色rgb值,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);
  //设置stroke-dasharray和路径的颜色
  progressDom.setAttribute("stroke-dasharray", value + ",10000");
  progressDom.setAttribute("stroke", `rgb(${red},${green},${blue})`);
  //设置文本内容和颜色
  textDom.innerHTML = persent + '%';
  textDom.setAttribute("fill", `rgb(${red},${green},${blue})`)
}
//30 毫秒变换一次
let num=0
setInterval(() => {
  num++
  if(num>100){
    num=0
  }
  rotatecircle(num)
},30)