js实现可调节的环形进度条效果代码-html代码-BFW代码库

js实现可调节的环形进度条效果代码

代码语言：html

所属分类：进度条

代码描述：js实现可调节的环形进度条效果代码，可调节进度、bar、选区及raduis。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {
  background: #060f1e;
  color:white;
}
.control-panel{
  text-align:center;
}
input[type='range'] {
  margin: 0 auto;
  display: inline-block;
  width: 20em;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <circular-progress id="cp" min="0" max="100" value="100" sections="10" bars="100" radius="10em"></circular-progress>
    <div class="control-panel">
        <div>Progress: <input id="progress" type="range" min="0" max="100" value="100" /></div>
        <div>Sections: <input id="sections" type="range" min="5" max="20" value="9" /></div>
        <div>Bars: <input id="bars" type="range" min="50" max="100" value="90" /></div>
        <div>Radius: <input id="radius" type="range" min="7" max="20" value="10" /></div>
    </div>
    <!-- partial -->
    <script >
        var cp = document.getElementById("cp");
document.getElementById("progress").addEventListener("input", (e)=>{
  cp.setAttribute("value", e.target.value);
});
document.getElementById("sections").addEventListener("input", (e)=>{
  cp.setAttribute("sections", e.target.value);
});
document.getElementById("bars").addEventListener("input", (e)=>{
  cp.setAttribute("bars", e.target.value);
});
document.getElementById("radius").addEventListener("input", (e)=>{
  cp.setAttribute("radius", e.target.value+"em");
});


class CircularProgress extends HTMLElement{
  static get observedAttributes(){
    return ["min", "max", "value", "sections", "bars", "radius"];
  }
  
  attributeChangedCallback(name, oldValue, newValue){
    switch(name){
      case "sections":
        this.segs = parseInt(newValue || oldValue || "10");
        this.renderOuterRing();
        break;
      case "bars":
        this.bars = parseInt(newValue || oldValue || "10");
        this.renderInnerBars();
        this.updateUI();
        break;
      case "value":
        this.value = parseInt(newValue || oldValue || "10");
        this.updateUI();
        break;
      case "max":
      case "min":
        this.updateUI();
        break;
      case "radius":
        this.radius = newValue || oldValue || "10em";
        this.wrapper.style.setProperty("--r", this.radius);
        this.updateUI();
        break;
    }
  }
  
  updateUI(){
    this.textContaner.textContent = this.getProgress() + "%";
    try{
      this.barContainer.querySelector(".progress-block.current").classList.remove("current");
    }catch(e){}
    
    var current = this.getProgress();
    current = current &g.........完整代码请登录后点击上方下载按钮下载查看