使用方法:
1、head引入css文件
2、body引入部分
投票公布
红队投票数:0
蓝队投票数:0
window.onload = function () {
//获取div1及下面的div
var oDiv = document.getElementById('div1');
var aDiv = oDiv.getElementsByTagName('div');
//获取点击按钮
var aBtn = document.getElementsByTagName('input');
//初始化百分比数字
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';
//设置进度条百分比数字
aDiv[0].innerHTML = sub((lNum / (lNum + rNum)) * 100 + "") + "%";
aDiv[1].innerHTML = sub((1 - lNum / (lNum + rNum)) * 100 + "") + "%";
//初始化投票数
var leftNum = 0;
var rightNum = 0;
//绑定红队投票按钮点击事件
aBtn[0].onclick = function () {
//每次点击累加投票数
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百分比数字
aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
//设置投票数
document.getElementById("result_1").innerHTML = "红队投票数:" + leftNum;
}
//绑定蓝队投票按钮点击事件
aBtn[1].onclick = function () {
//每次点击累加投票数
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百分比数字
aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
//设置投票数
document.getElementById("result_2").innerText = "蓝队投票数:" + rightNum;
}
//保留小数点后两位
function sub(str) {
var index = str.lastIndexOf(".");
if (index == -1) {
return str;
}
return str.substring(0, index + 3);
}
}