[英]Circular progress bar using JavaScript
我已經嘗試了在 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>
問題是因為您試圖在 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>
<!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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.