2015.3.9小练习（投票百分比jquery）-优快云博客

本文介绍了一个基于jQuery的简易投票系统实现方法，通过HTML、CSS和JavaScript完成页面布局及交互效果，实现了用户点击按钮进行投票的功能，并实时更新显示投票结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

投票百分比：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>

转载于:https://www.cnblogs.com/shijia-dreamhome/p/4324877.html