JS实现投票

来源：互联网发布：淘宝网址生成淘口令编辑：程序博客网时间：2024/06/05 03:07

有朋友反映代码不能用，是因为编辑器里面上传代码会把脚本自动添加注释，单独贴一下样式和脚本把!

那会看到CSDN上有投票的功能，感觉很好，以前是用jfreechart实现的，现在用js实现，很节省资源啊，呵呵.....写的有点不好，希望大家指教，哈哈..........

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>投票 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1">.voteresult{margin: 2px;margin-top: 5px;display: block;float: left;width: 250px;height: 10px;background-color: #EEE;overflow: hidden;}.style3{background-color: #666666;} </style> <mce:script type="text/javascript"></mce:script> </HEAD> <BODY> 你喜欢的运动： <br> 篮球 <input type="checkbox" name="item" value="1"> 足球 <input type="checkbox" name="item" value="2"> 乒乓球 <input type="checkbox" name="item" value="3"> <br> <input type="button" value="提交" onclick="vote();"> <br> <br> <table> <tr><td colspan=3><b>投票结果</b></td> </tr> <tr> <td>篮球</td> <td><div class="voteresult"><span id="span1" class="style3" style="width: 0px;"></span></div></td> <td><span id="span11">0%</span><td> </tr> <tr> <td>足球</td> <td><div class="voteresult"><span id="span2" class="style3" style="width: 0px;"></span></div></td> <td><span id="span12">0%</span><td> </tr> <tr> <td>乒乓球</td> <td><div class="voteresult"><span id="span3" class="style3" style="width: 0px;"></span></div></td> <td><span id="span13">0%</span><td> </tr></table> </BODY></HTML>

单独添加样式和script脚本

样式：

  <style>.voteresult{margin: 2px;margin-top: 5px;display: block;float: left;width: 250px;height: 10px;background-color: #EEE;overflow: hidden;}.style3{background-color: #666666;}  </style>

script脚本：

<script type="text/javascript">var total_vote = 0;var lq_vote = 0;var zq_vote = 0;var ppq_vote = 0;function vote(){var selectItem = 0;var items = document.getElementsByName("item");for(i = 0; i < items.length; i++){if(items[i].checked){selectItem++;total_vote++;switch(parseInt(items[i].value)){case 1: lq_vote++;break;case 2: zq_vote++;break;case 3: ppq_vote++;break;}}}if(selectItem <= 0){alert("请先选择您喜欢的运动");return;}var lq_num = new Number(lq_vote/total_vote);var zq_num = new Number(zq_vote/total_vote);var ppq_num = new Number(ppq_vote/total_vote);alert("投票成功");setSpanWidth(lq_num, 1);setSpanWidth(zq_num, 2);setSpanWidth(ppq_num, 3);for(i = 0; i < items.length; i++){items[i].checked = false;}}//设置投票结果显示function setSpanWidth(vote_num, type){var _width = new Number(250*vote_num);var _span = document.getElementById("span" + type);var _span1 = document.getElementById("span1" + type);//alert(_span.style.width);_span.style.width = _width.toFixed(0);var _percent = new Number(100*vote_num);_span1.innerHTML = _percent.toFixed(1) + "%";}  </script>

下面是运行的结果，呵呵：