Heim >Web-Frontend >HTML-Tutorial >如何实现环形进度条？_html/css_WEB-ITnose
如何实现环形进度条？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:061472Durchsuche
如果是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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html5和css3的常用参考网_html/css_WEB-ITnoseNächster Artikel：简单图片banner轮播_html/css_WEB-ITnose