如何实现环形进度条？_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:36:061486浏览
如果是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> 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn