Circular Fortschrittsbalken mit JavaScript

-1

Ich habe versucht, ein Beispiel auf Jsfiddle über eine kreisförmige Fortschrittsbalken mit Bild innerhalb und es funktioniert gut, wenn ich versuche Geige, aber es funktioniert nicht, wenn ich das gleiche auf meinem System lokal tun.Circular Fortschrittsbalken mit JavaScript

ich diese Störung erhalte:

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

meinen Code Ist hier:

<!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>

Quelle

2017-05-15 Amit R Singh

Code wird ausgeführt, bevor ''

im DOM existiert ... beheben, dass so schnell wie möglich - es funktioniert in jsfiddle weil Javascript ist standardmäßig in 'onload' - daher ist das DOM vollständig ausgefüllt ** bevor ** Code ausgeführt wird ASAP –

@JaromandaX wirft Schatten vor 10 Uhr. – evolutionxbox

@evolutionxbox - es ist nach 18 Uhr hier: p Ich denke, das ist vor 10 Uhr morgen aber –

Das Problem ist, weil Sie versuchen, das Plugin auf dem #bar Element vor es existiert in instanziiert das DOM. Sie müssen diesen Code-Block kurz vor dem </body> Element bewegen:

<!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>

Quelle

2017-05-15 08:16:37

Thnx, es war ein dummer Fehler und ich habe das nicht herausgefunden. –

Circular Fortschrittsbalken mit JavaScript

Antwort

Verwandte Themen