js投票程序百分比显示效果

2016-12-25 网页编程网 网页编程网

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js投票程序百分比显示效果</title>
<style>
*{ margin:0; padding:0;}
#div_{ background:#000; width:500px; height:30px; position:relative;}
.a_1, .a_2{ position:absolute; top:0; height:30px;}
.a_1{ left:0; background:#0F6;}
.a_2{ right:0; background:#39C;}
input{ margin-top:30px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div_');
var aDiv=oDiv.getElementsByTagName('div');
var aBtn=document.getElementsByTagName('input');
var lNum=50;
var rNum=25;
var lNums=(rNum/(lNum+rNum))*500;
var rNums=500-lNums;
aDiv[1].style.width=parseInt(lNums)+'px';
aDiv[0].style.width=500-parseInt(lNums)+'px';
aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);
aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);
aBtn[0].onclick=function(){
lNum=lNum+1;
var lNumss=parseInt(lNum/(lNum+rNum)*500);
aDiv[0].style.width=lNumss+'px';
aDiv[1].style.width=(500-lNumss)+'px';
aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);
aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);
}
aBtn[1].onclick=function(){
rNum=rNum+1;
var rNumss=parseInt(rNum/(lNum+rNum)*500);
aDiv[0].style.width=(500-rNumss)+'px';
aDiv[1].style.width=rNumss+'px';
aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);
aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);
}
}
</script>
</head>
<body>
<div id="div_">
<div class="a_1"></div>
<div class="a_2"></div>
</div>
<input type="button" name="aa" value="投票1" />
<input type="button" name="aa" value="投票2" />
</body>
</html>

阅读原文

阅读 5201

123 显示电脑版