円形のプログレスバーを実装するにはどうすればよいですか? _html/css

円形のプログレスバーを実装するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:36:06

オリジナル

1471 人が閲覧しました

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