一、js柱状投票图
效果图：
实现代码：
<!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=gb2312" /> <title>js柱状投票图</title> <style type="text/css"> body { font-weight:bold; color:#fff; font-size:16px; font-family:Arial, Helvetica, sans-serif; background-color:#000000;} .zhu { margin-top:100px; width:420px; position:relative;} .good { width:200px; position:absolute; bottom:0; left:0; text-align:center; background-color:#f00; height:50px;} .bad { width:200px;position:absolute; bottom:0; right:0; text-align:center; background-color:#009900; height:50px;} .and {} </style> <script type="text/javascript"> //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 //value 属性可设置或返回单选按钮的 value 属性的值。 //所有css在DOM结构里面都是字符型的 没有数字型的 function TouPiao(){ var good= parseInt(document.ballot.good_num.value); var bad= parseInt(document.ballot.bad_num.value); var sum= good+bad; var sum_g=Math.round(good/sum*100); var sum_b=Math.round(bad/sum*100); document.getElementByIdx_x_x_x("and").innerHTML = "总数为:"+sum+"票"; document.getElementByIdx_x_x_x("g").innerHTML = "好评"+sum_g+"%"; document.getElementByIdx_x_x_x("b").innerHTML = "差评:"+sum_b+"%"; document.getElementByIdx_x_x_x("g").style.height = sum_g+"px"; document.getElementByIdx_x_x_x("g").style.marginTop = (sum_g-100)+"px"; document.getElementByIdx_x_x_x("b").style.height = sum_b+"px"; document.getElementByIdx_x_x_x("b").style.marginTop = (sum_b-100)+"px"; } </script> </head> <body> <form action="" method="get"> 好评票数：<input type="text" /><br /> 差评票数：<input type="text" /><br /> <input type="button" value="提交" /> </form> <div> <div>好评50%</div> <div>差评50%</div> </div> <div>总数为0票</div> </body> </html>
二、JS投票
效果图：
实现代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>投票 </TITLE> <META CONTENT="EditPlus"> <META CONTENT=""> <META CONTENT=""> <META CONTENT=""> <mce:style><!-- .voteresult{ margin: 2px; margin-top: 5px; display: block; float: left; width: 250px; height: 10px; background-color: #EEE; overflow: hidden; } .style3{ background-color: #666666; } --></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"><!-- 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.getElementByIdx_x_x_x("span" + type); var _span1 = document.getElementByIdx_x_x_x("span1" + type); //alert(_span.style.width); _span.style.width = _width.toFixed(0); var _percent = new Number(100*vote_num); _span1.innerHTML = _percent.toFixed(1) + "%"; } // --></mce:script> </HEAD> <BODY> 你喜欢的运动： <br> 篮球 <input type="checkbox" value="1"> 足球 <input type="checkbox" value="2"> 乒乓球 <input type="checkbox" value="3"> <br> <input type="button" value="提 交"> <br> <br> <table> <tr> <td colspan=3><b>投票结果</b></td> </tr> <tr> <td>篮球</td> <td><div><span></span></div></td> <td><span>0%</span><td> </tr> <tr> <td>足球</td> <td><div><span></span></div></td> <td><span>0%</span><td> </tr> <tr> <td>乒乓球</td> <td><div><span></span></div></td> <td><span>0%</span><td> </tr> </table> </BODY> </HTML>
三、投票
效果图：
实现代码：