基於js實現投票的執行個體代碼，js投票執行個體

基於js實現投票的執行個體代碼，js投票執行個體

本文執行個體講述了JavaScript實現三種投票方式的實現方法，分享給大家供大家參考。具體如下：

一、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" name="ballot">好評票數：<input name="good_num" type="text" /><br />差評票數：<input name="bad_num" type="text" /><br /><input name="bt" type="button" value="提交" onclick="TouPiao()" /></form><div class="zhu"><div class="good" id="g">好評50%</div><div class="bad" id="b">差評50%</div></div><div class="and" id="and">總數為0票</div></body></html>

二、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><!-- .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" 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>

三、投票
：

實現代碼：

<!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>無標題文檔</title><style type="text/css">body{ font-size:12px;}</style><script language="javascript"> function add(txt) {  var abc = document.getElementByIdx_x("abc"); abc.innerHTML = parseInt(abc.innerHTML) + 1; }</script></head><body><table width="50" height="50" border="1" cellpadding="0" cellspacing="0"> <tr>  <td align="center" valign="middle"><div id="abc">0</div></td> </tr> <tr>  <td align="center" valign="middle"><a href="#" onclick="add(1)">投一票</a></td> </tr></table></body></html>

以上就是本文的全部內容，希望對大家的學習有所協助。