2015.3.9小练习（投票百分比jquery）
投票百分比：CSS太丑了不要介意……先实现功能，其实我CSS还是可以的。基本的效果都做的出来……
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>投票</title>
<script src="..\jquery\jquery-2.1.3.js" type="text/javascript" ></script>
<script src="debug.js" type="text/javascript" ></script>
<style type="text/css">
dd{
font-size:50px;
}
</style>
<script type="text/javascript"> $(function(){ var totalnum=0,numr=0,numg=0;
$("#mainid").css({"position":"absolute", "width":"1000px", "height":"330px","left":"200px","background-color":"rgb(240,246,240)"});
$("#mainid .effect:eq(0)").css({"width":"0px","height":"20px","background-color":"green","float":"left"});
$("#mainid .effect:eq(1)").css({"width":"0px","height":"20px","background-color":"red","float":"left"});
$("#mainid dd").css({"float":"right","cursor":"pointer","opacity":"0.5"});
$("#mainid dd:eq(0)").attr("numr","0");
$("#mainid dd:eq(1)").attr("numg","0");
$("#mainid dd").bind({
"mouseenter":function(){
$(this).css("opacity","1.0").siblings("dd").css("opacity","0.5");
},
"mouseleave":function(){
$(this).css("opacity","0.5");
},
"click":function(){
if ($(this).attr("numr")) { //当该dd标签中有numr属性时
numr++;
}
if ($(this).attr("numg")) { //当该dd标签中有numg属性时
numg++;
}
showit();
}
});
function showit()
{
totalnum=numr+numg;
$("#mainid b:eq(0)").text(totalnum);
$("#mainid b:eq(1)").text(numg);
$("#mainid b:eq(2)").text(numr);
var numgWidth=Math.ceil(parseInt($("#mainid div:first").width(),10)*numg/totalnum)+"px";
var numrWidth=parseInt($("#mainid div:first").width(),10)-parseInt(numgWidth,10)+"px";
$("#mainid .effect:eq(0)").css("width",numgWidth);
$("#mainid .effect:eq(1)").css("width",numrWidth);
}
});
</script>
</head>
<body>
<div id="mainid">
<div style="position:relative;width:500px;height:20px;top:60px;background-color:#CCCCCC"><div class="effect"></div><div class="effect"></div></div>
投票总人数:<b>0</b> 支持数:<b>0</b> 反对数:<b>0</b>
<dd>反对<img src="images\redbutton.gif" /></dd><dd>支持<img src="images\greenbutton.gif" /></dd>
</div>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
