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&quo.........完整代码请登录后点击上方下载按钮下载查看