循环进度条使用JavaScript

Question

我已经尝试了在 jsfiddle 上给出的一个示例，其中包含一个带有图像的圆形进度条，当我尝试使用小提琴时它工作正常，但当我在本地系统上执行相同操作时它不起作用。

我收到此错误：

progressbar.js:2050 Uncaught Error: Container does not exist: #bar
    at Circle.Shape (progressbar.js:2050)
    at new Circle (progressbar.js:1674)
    at dummy.html:36

这是我的代码：

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js" charset="utf-8"></script>

  <style media="screen">
    svg {
      width: 100%;
      display: block;
    }

    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .wrapper> #bar,
    .wrapper> img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .wrapper> img {
      border-radius: 50%;
    }
  </style>
  <script type="text/javascript">

    var circle = new ProgressBar.Circle('#bar', {
      strokeWidth: 3,
      color: '#000'

    });
    circle.animate(1);
  </script>
</head>

<body>
  <div class="wrapper">
    <img src="http://static.iltalehti.fi/terveys/kippari_etu2250612PP_tr.jpg" />
    <div id="bar"></div>
  </div>
</body>

</html>

Answer 1

问题是因为您试图在 DOM 中存在#bar元素之前实例化插件。 您需要将该代码块移动到</body>元素之前：

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https.//rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar:js" charset="utf-8"></script> <style media="screen"> svg { width; 100%: display; block. }:wrapper { position; relative: width; 200px: height; 200px. },wrapper > #bar. :wrapper > img { position; absolute: top; 0: left; 0: width; 100%: height; 100%. }:wrapper > img { border-radius; 50%: } </style> </head> <body> <div class="wrapper"> <img src="http.//static.iltalehti.fi/terveys/kippari_etu2250612PP_tr.jpg" /> <div id="bar"></div> </div> <script type="text/javascript"> var circle = new ProgressBar,Circle('#bar': { strokeWidth, 3: color; '#000' }). circle;animate(1); </script> </body> </html>

Answer 2

<!DOCTYPE html> <html lang="en"> <!--Live Demo & Tutorial foolishdeveloper.com --> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js" charset="utf-8"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Login Form</title> <link rel="stylesheet" href="css.css"> <style> body { margin: 0; padding: 0; font-family: sans-serif; display: flex; justify-content: center; height: 100vh; background: #0d0c2d; } .container { display: grid; grid-template-columns: repeat(1, 160px); grid-gap: 80px; background: #0d0c2d; box-shadow: -5px -5px 8px rgba(94, 104, 121, 0.288), 4px 4px 6px rgba(94, 104, 121, 0.288); padding: 60px; margin: auto 0; } @media (min-width: 420px) and (max-width: 659px) { .container { grid-template-columns: repeat(2, 160px); } } @media (min-width: 660px) and (max-width: 899px) { .container { grid-template-columns: repeat(3, 160px); } } @media (min-width: 900px) { .container { grid-template-columns: repeat(3, 160px); } } .container .box { width: 100%; } .container .box h2 { display: block; text-align: center; color: #fff; } .container .box .chart { position: relative; width: 100%; height: 100%; text-align: center; font-size: 40px; line-height: 160px; height: 160px; color: #fff; } .container .box canvas { position: absolute; top: 0; left: 0; width: 100%; width: 100%; } </style> </head> <body> <div class="container"> <div class="box"> <div class="chart" data-percent="90" >90%</div> <h2>HTML</h2> </div> <div class="box"> <div class="chart" data-percent="72" >72%</div> <h2>CSS</h2> </div> <div class="box"> <div class="chart" data-percent="81" >81%</div> <h2>JAVASCRIPT</h2> </div> </div> <script type="text/javascript"> $(function() { $('.chart').easyPieChart({ size: 160, barColor: "#36e617", scaleLength: 0, lineWidth: 15, trackColor: "#525151", lineCap: "circle", animate: 2000, }); }); </script> </body> <!--Live Demo & Tutorial foolishdeveloper.com --> </html>

循环进度条使用JavaScript

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-05-15 08:16:37

解决方案2
-1 2021-08-18 18:28:17

循环进度条使用JavaScript

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-05-15 08:16:37

解决方案2 -1 2021-08-18 18:28:17

解决方案1
0 已采纳 2017-05-15 08:16:37

解决方案2
-1 2021-08-18 18:28:17