数据库投票票数统计HTML,js投票数量统计代码

使用方法：

1、head引入css文件

2、body引入部分

投票公布

50%

50%

红队投票数：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);

}

}