一款HTML5之SVG饼状图百分比进度代码,
页面的head部分,需引入两个CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="css/jquery-pie-loader.css">
页面的body部分,在section容器里放了多个figure标签,代码如下:
<section class="container">
<figure id="pie" data-behavior="pie-chart"></figure>
<figure id="pie2" data-behavior="pie-chart"></figure>
<figure id="pie3" data-behavior="pie-chart"></figure>
<figure id="pie4" data-behavior="pie-chart"></figure>
<figure id="pie5" data-behavior="pie-chart"></figure>
<figure id="pie6" data-behavior="pie-chart"></figure>
<figure id="pie7" data-behavior="pie-chart"></figure>
<figure id="pie8" data-behavior="pie-chart"></figure>
</section>
页面的底部,需引入jQuery库和饼状图插件,并设置好相应参数,代码如下:
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-pie-loader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var rand = function() {
return Math.floor((Math.random() * 100) + 1)
}
$('*[data-behavior="pie-chart"]').each(function() {
$(this).svgPie({percentage: rand()});
});
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791