使用JavaScript的圓形進度條

-1

我試過一個關於jsfiddle關於一個圓形進度條的示例，裏面有圖像，它的工作正常，當我嘗試小提琴但它不工作，當我在我的系統本地做同樣的工作。使用JavaScript的圓形進度條

我收到此錯誤：

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>

來源

2017-05-15 Amit R Singh

代碼執行前''

在DOM存在......解決這個問題的ASAP - 它在的jsfiddle因爲JavaScript默認情況下在'onload'中 - 因此在**代碼運行之前DOM完全填充** ASAP –

@JaromandaX在上午10點之前投擲陰影。 – evolutionxbox

@evolutionxbox - 在下午6點之後：p我想那是在明天上午10點之前，儘管 –

的問題是因爲你想它存在於之前實例化#bar元素上的插件DOM。你需要只是</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>

來源

2017-05-15 08:16:37

thnx，這是一個愚蠢的錯誤，我沒有弄清楚。 –

使用JavaScript的圓形進度條

回答

相關問題