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

代码语言：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 > 0 ? current : 1;
    this.wrapper.style.setProperty("--progress", current);
    this.barContainer.querySelector(".progress-block:nth-child("+Math.ceil((this.bars * current / 100))+")").classList.add("current");
    this.textContent = this.value + "%";
  }
  
  renderOuterRing(){
    for(var i=this.sectionContainer.children.length;i<this.segs;i++){
      var section = document.createElement("div");
      section.style.setProperty("--index", i);
      // section.setAttribute("style", "--index:"+i);
      section.classList.add("segments-block");
      this.sectionContainer.appendChild(section);
    }
    while (this.segs < this.sectionContainer.children.length) {
      this.sectionContainer.removeChild(this.sectionContainer.lastChild);
    }
    
    this.wrapper.style.setProperty("--totalSegs", this.segs);
  }
  
  renderInnerBars(){
    while (this.bars < this.barContainer.children.length) {
      this.barContainer.removeChild(this.barContainer.lastChild);
    }
    for(var i=this.barContainer.children.length;i<this.bars;i++){
      var bar = document.createElement("div");
      bar.style.setProperty("--index", i);
      // bar.setAttribute("style", "--index:"+i);
      bar.classList.add("progress-block");
      this.barContainer.appendChild(bar);
    }
    this.wrapper.style.setProperty("--total", this.bars);
  }
  
  getProgress(){
    return Math.ceil(100 * this.value / (this.max - this.min));
  }
  
  constructor(){
    super();
    
    this.segs = parseInt(this.getAttribute.........完整代码请登录后点击上方下载按钮下载查看