投票展示百分比条形图 _Web前端

投票显示百分比条形图

完整工程下载地址：http://download.csdn.net/download/software0116/4661751

$.fn.study_vote= function(options,totle){
	var settings=options;
	if(totle!=null)
	{
		if(isNaN(totle))
		{
			alert('参数错误');
			return;
		}
	}
	if(typeof(settings)!='object')
	{
		alert('参数错误');
		return;
	}
	var container = jQuery(this);
	container.html('<dl id="studyvote"></dl>');
	var study_voteCount=0;
	if(totle==null||totle=='')
	{//单项投票
		for(i=0;i<settings.length;i++)
		{
			study_voteCount += parseInt(settings[i].data);
		}
	}
	else
	{//多项投票
		study_voteCount = parseInt(totle);
	}
	var study_votestr="";
		for(i=0;i<settings.length;i++)
		{
			var studyplay_present=settings[i].data/study_voteCount*100;
			if(parseInt(studyplay_present)!=studyplay_present)
			{
				studyplay_present=studyplay_present.toFixed(2);
			}
			study_votestr +='<dd class="dd"><div class="fl">'+settings[i].name+'：</div><div class="outbar"><div class="inbar" style="width:'+studyplay_present+'%;background:'+settings[i].color+';"></div></div> <div class="fl">'+studyplay_present+'% </div></dd>';
		}
	container.find('#studyvote').html(study_votestr)
	}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Studyplay_vote.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#progressbar").study_vote([
		{"name":"支持","data":"90","color":"#39c"},
		{"name":"反对","data":"50","color":"#f00"},
		{"name":"中立","data":"20","color":"#000"}
		
	]);
});	
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{margin:23px auto;width:500px;}
#studyvote .fl{float:left;}
#studyvote .dd{clear:both;margin:7px 0;width:100%;height:20px;}
#studyvote .outbar{border:1px solid #dedede;background:#fff;height:18px;width:80%;float:left;}
#studyvote .inbar{height:18px;display:block;}
</style>

<div class="demo">
	<div id="progressbar"></div>
</div>

</body>
</html>