代码描述:jQuery简单投票。jQuery简单投票源码实例
投票功能在很多网站都有应用,本章节分享一段使用jQuery实现的这样的代码。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> body, div, a, span { margin:0; padding:0; } .g-pt-10{padding-top:10px;} .g-ta-c{text-align:center;} .g-fz-16{font-size:16px;} .g-d-b{display:block;} .g-f-l{float:left;} .g-c-w{color:#fff;} .g-fz-18{font-size:18px;} .g-d-ib{display:inline-block;} .g-cf:after { content:""; clear:both; display:table; } .g-cf{zoom:1} a:hover { text-decoration:none; color:#ff0000; } .box { width:705px; height:242px; margin:50px auto; background:#f5f9fe; border:1px solid #6888a1; } div.mid { width:330px; margin:20px auto; } a.support { width:124px; height:73px; background:#008DCA; margin-right:80px; } a.oppose { width:124px; height:73px; background:#F78106; } .g-mt-45{margin-top:45px;} span.line { width:380px; height:17px; margin:0 auto; background:#008DCA; } span.line2 { width:80px; height:17px; background:#F78106; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> var sup; var opp function support(){ sup+=1; $('#supamount').text(sup.toString()); $('#opppercent').text((100-(sup/(sup+opp))*100).toFixed(0).toString()); $('#supline').attr("style","width:"+380*(sup/(sup+opp))+"px"); } function oppose(){ opp+=1; $('#oppamount').text(opp.toString()); $('#suppercent').text(((sup/(sup+opp))*100).toFixed(0).toString()); $('#opppercent').text((100-(sup/(sup+opp))*100).toFixed(0).toString()); $('#supline').attr("style","width:"+380*(sup/(sup+opp))+"px"); } $(document).ready(function(){ sup=parseInt($('#supamount').text()); opp=parseInt($('#oppamount').text()); }) </script> </head> <body> <div class="box"> <h3 class="g-pt-10 g-ta-c g-fz-16">如果微信将会进行收费,你将会怎么办?</h3> <div class="mid g-cf"> <a class="support g-d-b g-f-l"> <p class="g-ta-c g-c-w g-fz-18 g-mt-45" id="supamount">0</p> </a> <a class="oppose g-d-b g-f-l"> <p class="g-ta-c g-c-w g-fz-18 g-mt-45" id="oppamount">0</p> </a> </div> <div class="g-ta-c"> <p class="g-d-ib" id="suppercent">0</p> % <span class="line g-d-ib g-cf"><span class="line2 g-d-ib g-f-l" id="supline"></span></span> <p class="g-d-ib" id="opppercent">0</p> % </div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能