jquery实现投票占比特效，具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery实现投票占比特效</title> <style type="text/css"> #ProgressBarBox{vertical-align: middle;} #ProgressBarBox div {float:left;} #processBar{width:6px;height:10px; background-color: #FFFFFF;} #processBar div{height:100%;} #barOk{float:left;background-color:#f03;} #barNook{float:right;background-color:#000;} </style> <script type="text/javascript" src="https://www.phpernote.com/js/jquery.min.js"></script> <script type="text/javascript"> $(function() { showPercent(); $('#ok,#nook').click(function () { $(this).attr('value', parseInt($(this).attr('value')) + 1); showPercent(); }); }); function showPercent() { var total = parseInt($('#ok').attr('value')) + parseInt($('#nook').attr('value')); var okPercent = parseFloat(parseFloat($('#ok').attr('value')) / total); okPercent = Math.round(okPercent * 100); var nookPercent = 100 - okPercent; if (total) { $('#processBar').css({'width': '300px'}); } $('#barOk').css({'width': okPercent + '%'}); $('#barNook').css({'width': nookPercent + '%'}); } </script> </head> <body> <div id="ProgressBarBox"> <div><label><input type="radio" id="ok" value="0" />好</label></div> <div id="processBar"> <div id="barOk"></div> <div id="barNook"></div> </div> <div><label><input type="radio" id="nook" value="0" />差</label></div> <div style="clear:both;"></div> </div> </body> </html>
—-想了解更多的jQuery特效教程关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/124026.html