<link type="text/css" href="css/style.css" rel="stylesheet" />
<div class="vote"> <h2>投票公布</h2> <div id="div1"> <div class="a_1">50%</div> <div class="a_2">50%</div> </div> <!-- 紅隊(duì)投票 --> <div id="div2"> <div> <img src="img/1.jpg" height="100%" width="100%" /> </div> <div class="diaphane" id="result_1"> <p>紅隊(duì)投票數(shù):0</p> </div> <input type="button" name="aa" value="投紅隊(duì)" /> </div> <!-- 藍(lán)隊(duì)投票 --> <div id="div3"> <div> <img src="img/2.jpg" height="100%" width="100%" /> </div> <div class="diaphane" id="result_2"> <p>藍(lán)隊(duì)投票數(shù):0</p> </div> <input type="button" name="aa" value="投藍(lán)隊(duì)" /> </div> </div> <script type="text/javascript"> window.onload = function () { //獲取div1及下面的div var oDiv = document.getElementById('div1'); var aDiv = oDiv.getElementsByTagName('div'); //獲取點(diǎn)擊按鈕 var aBtn = document.getElementsByTagName('input'); //初始化百分比數(shù)字 var lNum = 50; var rNum = 50; //計(jì)算進(jìn)度條寬度 var lNums = (rNum / (lNum + rNum)) * 520; var rNums = 520 - lNums; //設(shè)置進(jìn)度條width寬度 aDiv[1].style.width = parseInt(lNums) + 'px'; aDiv[0].style.width = 520 - parseInt(lNums) + 'px'; //設(shè)置進(jìn)度條百分比數(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; //綁定紅隊(duì)投票按鈕點(diǎn)擊事件 aBtn[0].onclick = function () { //每次點(diǎn)擊累加投票數(shù) lNum = lNum + (++leftNum); //計(jì)算div對應(yīng)長度 var lNumss = parseInt(leftNum / (leftNum + rightNum) * 520); //設(shè)置進(jìn)度條width寬度 aDiv[0].style.width = lNumss + 'px'; aDiv[1].style.width = (520 - lNumss) + 'px'; //計(jì)算div百分比數(shù)字 aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%"; aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%"; //設(shè)置投票數(shù) document.getElementById("result_1").innerHTML = "紅隊(duì)投票數(shù):" + leftNum; } //綁定藍(lán)隊(duì)投票按鈕點(diǎn)擊事件 aBtn[1].onclick = function () { //每次點(diǎn)擊累加投票數(shù) rNum = rNum + (++rightNum); //計(jì)算div對應(yīng)長度 var rNumss = parseInt(rightNum / (leftNum + rightNum) * 520); //設(shè)置進(jìn)度條width寬度 aDiv[0].style.width = (520 - rNumss) + 'px'; aDiv[1].style.width = rNumss + 'px'; //計(jì)算div百分比數(shù)字 aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%"; aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%"; //設(shè)置投票數(shù) document.getElementById("result_2").innerText = "藍(lán)隊(duì)投票數(shù):" + rightNum; } //保留小數(shù)點(diǎn)后兩位 function sub(str) { var index = str.lastIndexOf("."); if (index == -1) { return str; } return str.substring(0, index + 3); } } </script>
1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請勿用于商業(yè)用途,會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個(gè)人非盈利用途,織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。