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に存在する前に、あなたのコードが実行される...できるだけ早くことを修正 - それはjavascriptのためjsfiddleで動作しますデフォルトで 'onload'にあります - したがって、**コードは**コードが実行される前にDOMが完全に取り込まれています –

@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を使用した円形進捗バー

答えて

関連する問題