Jun
26
2020
jquery实现投票占比特效
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="http://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实现投票占比特效：等您坐沙发呢！
发表评论
