头像

原生js制作投票数量统计代码

来源:https://www.sucaihuo.com/js/4525.html 18***38 2019-07-11 11:12浏览(46) 收藏

原生js制作投票数量统计代码,点击投票按钮,投票数量和百分比数据实时变化。
原生js制作投票数量统计代码
分类:其它特效 难易:初级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 3 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript">
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);
	}
}
</script>
标签: 投票
最新交易
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

  • 头像 沙发
    07-12 10:08
    AJ***on
    十分实用的效果,谢谢分享!
1 2