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

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

＆＃13;
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

使用JavaScript的循环进度条

1 个答案: