使用方法：

1、head引入css文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

2、body引入部分

<div class="vote">
	<h2>投票公布</h2>
	<div id="div1">
		<div class="a_1">50%</div>
		<div class="a_2">50%</div>
	</div>
	<!-- 紅隊投票 -->
	<div id="div2">
		<div>
			<img src="img/1.jpg" height="100%" width="100%" />
		</div>
		<div class="diaphane" id="result_1">
			<p>紅隊投票數(shù)：0</p>
		</div>
		<input type="button" name="aa" value="投紅隊" />
	</div>
	<!-- 藍隊投票 -->
	<div id="div3">
		<div>
			<img src="img/2.jpg" height="100%" width="100%" />
		</div>
		<div class="diaphane" id="result_2">
			<p>藍隊投票數(shù)：0</p>
		</div>
		<input type="button" name="aa" value="投藍隊" />
	</div>

</div>

<script type="text/javascript">
window.onload = function () {
	//獲取div1及下面的div
	var oDiv = document.getElementById('div1');
	var aDiv = oDiv.getElementsByTagName('div');
	//獲取點擊按鈕
	var aBtn = document.getElementsByTagName('input');
	//初始化百分比數(shù)字
	var lNum = 50;
	var rNum = 50;
	//計算進度條寬度
	var lNums = (rNum / (lNum + rNum)) * 520;
	var rNums = 520 - lNums;
	//設置進度條width寬度
	aDiv[1].style.width = parseInt(lNums) + 'px';
	aDiv[0].style.width = 520 - parseInt(lNums) + 'px';
	//設置進度條百分比數(shù)字
	aDiv[0].innerHTML = sub((lNum / (lNum + rNum)) * 100 + "") + "%";
	aDiv[1].innerHTML = sub((1 - lNum / (lNum + rNum)) * 100 + "") + "%";
	//初始化投票數(shù)
	var leftNum = 0;
	var rightNum = 0;
	//綁定紅隊投票按鈕點擊事件
	aBtn[0].onclick = function () {
		//每次點擊累加投票數(shù)
		lNum = lNum + (++leftNum);
		//計算div對應長度
		var lNumss = parseInt(leftNum / (leftNum + rightNum) * 520);
		//設置進度條width寬度
		aDiv[0].style.width = lNumss + 'px';
		aDiv[1].style.width = (520 - lNumss) + 'px';
		//計算div百分比數(shù)字
		aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		//設置投票數(shù)
		document.getElementById("result_1").innerHTML = "紅隊投票數(shù)：" + leftNum;
	}
	//綁定藍隊投票按鈕點擊事件
	aBtn[1].onclick = function () {
		//每次點擊累加投票數(shù)
		rNum = rNum + (++rightNum);
		//計算div對應長度
		var rNumss = parseInt(rightNum / (leftNum + rightNum) * 520);
		//設置進度條width寬度
		aDiv[0].style.width = (520 - rNumss) + 'px';
		aDiv[1].style.width = rNumss + 'px';
		//計算div百分比數(shù)字
		aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		//設置投票數(shù)
		document.getElementById("result_2").innerText = "藍隊投票數(shù)：" + rightNum;
	}
	//保留小數(shù)點后兩位
	function sub(str) {
		var index = str.lastIndexOf(".");
		if (index == -1) {
			return str;
		}
		return str.substring(0, index + 3);
	}
}
</script>