search

Home >Web Front-end >HTML Tutorial >如何实现环形进度条？_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:36:061473browse

如果是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以上，我本地测试用的是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>

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

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html5和css3的常用参考网_html/css_WEB-ITnoseNext article：简单图片banner轮播_html/css_WEB-ITnose

Related articles

See more