ホームページ >ウェブフロントエンド >htmlチュートリアル >円形のプログレスバーを実装するにはどうすればよいですか? _html/css_WEB-ITnose
円形のプログレスバーを実装するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:061473ブラウズ
50% の場合、リングは半分まで進みます。 。 。
ディスカッションに返信 (解決策)
試してみましょう: Highcharts
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="highcharts.js"></script><title>open source</title></head><body> <div class="project_item_process"> <div class="project_item_table" id="p1"> <label>90%</label> </div> </div><script type="text/javascript">$(function(){ $(".project_item_table").each(function(i,item){ var ok=parseInt($(this).find('label').html().replace("%","")), fl=100-ok; $(this).highcharts({ chart:{ type:'pie', width:130, height:130 }, plotOptions:{ pie:{ innerSize:65, colors:['green','#ddd'], dataLabels:{enabled:false} } }, title:{ text:ok+'%', verticalAlign:'middle', y:2, userHtml:true, fontFamily:'微软雅黑' }, credits:{enabled:false}, tooltip:{enabled:false}, legend:{enabled:false}, series:[{ data:[ok,fl] }] }); });});</script></body></html> 私のローカル テストでは Highcharts JS v3.0.0 以降が必要で、会社のプログラムでは v3 が使用されています
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title> 页面名称 </title><style type="text/css"></style></head><body><canvas id="canvasId" width="400" height="350"></canvas><script type="text/javascript"> var canvas = document.getElementById("canvasId"); var cxt = canvas.getContext("2d"); function loading(i) //渲染loading { cxt.save(); cxt.strokeStyle = "#373842"; cxt.fillStyle = "#16161b"; cxt.lineWidth = 2; cxt.beginPath(); cxt.arc(canvas.width>>1,canvas.height>>1,60,0,2*Math.PI,false); cxt.closePath(); cxt.fill(); cxt.stroke(); cxt.strokeStyle = "#83b0fc"; cxt.shadowColor = "#b5c7fd"; cxt.shadowBlur = 5; cxt.lineWidth = 5; cxt.lineCap= "round"; cxt.beginPath(); cxt.arc(canvas.width>>1,canvas.height>>1,50,-0.5*Math.PI,2*Math.PI*(i/100-0.25),false); cxt.stroke(); cxt.fillStyle = "#6699ff"; cxt.font = "18px Arial"; cxt.textAlign = "center"; cxt.fillText("Loading...",canvas.width>>1,canvas.height>>1); cxt.fillText(Math.round(i)+"%",canvas.width>>1,(canvas.height>>1)+20); cxt.restore(); }function rt(i) { loading(i); if(i<100) setTimeout(function () { rt(i+1); }, 200);}rt(0);</script></body></html> 。 私はインターンですが、最近会社で必要になったので、自分で書く練習をしました〜
rreee
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。