用VML程序来显示物品的百分比，效果很不错的哟

- 中国WEB开发者网络 (http://www.webasp.net)
-- 网页特效 (http://www.webasp.net/javascript/)
--- 用VML程序来显示物品的百分比，效果很不错的哟 (http://www.webasp.net/javascript/1/721.htm)
-- 发布日期： 2005-07-01
<!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供！ -->
<!-- 要实现此效果需要 1 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

<center><font color=red face="隶书" size=6>VML赏析二</font></center>
<BR>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<center>
<script language="JavaScript">
function changeit()
{
banana.value=100-(parseInt(apple.value)+parseInt(pear.value));
showPie();
}
var r=2000;
function createPie(sa,ea,color,n)
{
var fs=Math.PI*2*(sa/360);
var fe=Math.PI*2*(ea/360);
var sx=parseInt(r*Math.sin(fs));
var sy=parseInt(-r*Math.cos(fs));
var ex=parseInt(r*Math.sin(fe));
var ey=parseInt(-r*Math.cos(fe));
var newPie=document.createElement("<v:shape title='"+n+"' style='position:absolute;z-index:8;width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='black' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
//var newPie=document.createElement("<v:shape style='position:absolute;z-index:8;left:"+px+";top:"+py+";width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='"+color+"' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
pie.insertBefore(newPie);
}
function showPie()
{
pie.innerHTML="";
createPie(0,parseInt(banana.value)*3.6,"blue","香蕉");
createPie(parseInt(banana.value)*3.6,parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,"red","苹果");
createPie(parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,360,"green","梨");
}
</script>
<body onload="changeit()">
&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>苹果</font>：
<select id="apple" onchange="changeit()">
<option value="10">10%
<option value="20">20%
<option value="30">30%
<option value="40">40%
<option value="50">50%
</select>
&nbsp;&nbsp;<font color="green">梨</font>：
<select id="pear" onchange="changeit()">
<option value="5">5%
<option value="10">10%
<option value="20">20%
<option value="30">30%
<option value="40">40%
</select>
&nbsp;&nbsp;<font color="blue">香蕉</font>：<input id="banana" type="text" readonly size="2" value="85">%<br><br>
<center>
<v:group ID="group1" CoordOrig="-3000,-2000" CoordSize="6000,4000" style="width:300;height:200;position:relative">
<v:rect style="position:relative;left:-3000;top:-3000;WIDTH:6000;HEIGHT:6000;" fillcolor="white" strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
<div id="pie"></div>
</v:group>

webasp.net