如何实现环形进度条？_html/css_WEB-ITnose-HTML Tutorial-php.cn

如何实现环形进度条？_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:36:06

Original

1470 people have browsed it

如果是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>

Copy after login

以上代码需要Highcharts JS v3.0.0以上，我本地测试用的是v4,公司的程序用的是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>

Copy after login

刚好最近公司需要，虽然我是个实习生，但自己练习写了一个，希望对你有帮助~

<!doctype html><html><head><meta charset="utf-8"><title>circle</title></head><script type="text/javascript">function JinDu(){    var demo=document.getElementById("y");    var CircleX=demo.getContext("2d");    CircleX.clearRect(0, 0, 400, 400);    var Max={        x:200,        y:200,        r:100        }    var Min={        x:200,        y:200,        r:80        }    var Circlevar={        x:200,        y:200,        r:90        }     CircleX.lineWidth="18";    CircleX.beginPath();    CircleX.strokeStyle="black";    CircleX.arc(Min.x,Min.y,Min.r,Math.PI*1.5, Math.PI*3.5, false);    CircleX.stroke();    CircleX.beginPath();    CircleX.arc(Max.x,Max.y,Max.r,Math.PI*1.5, Math.PI*3.5, false);    CircleX.stroke();    var x=document.getElementById("in").value;    var y=1.5+x/100*2;    console.log(y);    CircleX.beginPath();    CircleX.strokeStyle="green";    CircleX.arc(Circlevar.x,Circlevar.y,Circlevar.r,Math.PI*1.5, Math.PI*y, false);    CircleX.stroke();}</script><body> <canvas style="background:#FFC" height="400" width="400" id="y"></canvas> <input type="text" id="in"> <input type="submit" onclick="JinDu()"></body></html>

Copy after login