基于JS實現(xiàn)一個簡單的投票demo

更新時間：2022年06月08日 08:14:45 作者：肥學(xué)

這篇文章主要介紹了如何利用JavaScript實現(xiàn)一個簡單的投票demo，文中的示例代碼講解詳細，對我們學(xué)習(xí)有一定參考價值，需要的可以參考一下

演示

說明

今天沒有什么好的內(nèi)容分享，跟大家講一個標(biāo)簽吧增長姿勢。

line-height CSS 屬性用于設(shè)置多行元素的空間量，如多行文本的間距。

根據(jù)瀏覽器的解析不同，line-height的表現(xiàn)方式有兩種

1.基線之間的距離為line-height

2.lineHeight 為，font-size的上下加上半行距

它的取值為：

1·normal：默認。設(shè)置合理的行間距。取決于用戶端。桌面瀏覽器（包括Firefox）使用默認值，約為1.2，這取決于元素的

2·font-family。 number：設(shè)置數(shù)字，此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距，即number為當(dāng)前font-size的倍數(shù)。

3·length ：設(shè)置固定的行間距。

4· % ：基于當(dāng)前字體尺寸的百分比行間距。

5· inherit：規(guī)定應(yīng)該從父元素繼承 line-height屬性的值。

源碼

body設(shè)置

<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>

js實現(xiàn)投票的動畫

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;
	//設(shè)置進度條width寬度
	aDiv[1].style.width = parseInt(lNums) + 'px';
	aDiv[0].style.width = 520 - parseInt(lNums) + 'px';
	//設(shè)置進度條百分比數(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對應(yīng)長度
		var lNumss = parseInt(leftNum / (leftNum + rightNum) * 520);
		//設(shè)置進度條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è)置投票數(shù)
		document.getElementById("result_1").innerHTML = "紅隊投票數(shù)：" + leftNum;
	}
	//綁定藍隊投票按鈕點擊事件
	aBtn[1].onclick = function () {
		//每次點擊累加投票數(shù)
		rNum = rNum + (++rightNum);
		//計算div對應(yīng)長度
		var rNumss = parseInt(rightNum / (leftNum + rightNum) * 520);
		//設(shè)置進度條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è)置投票數(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);
	}
}

css設(shè)定

* {
	margin: 0;
	padding: 0;
	list-style-type:none;
}
a,img{border:0;}

.vote{
	width:530px;
	margin:100px auto;
}

.vote h2{
	height:24px;
	line-height:24px;
	font-size:18px;
	font-weight:400;
	margin-bottom:20px;
	text-align:center;
}

#div1 {
	width: 520px;
	height: 30px;
	position: relative;
}

#div2 {
	margin:30px 20px 0 0;
	width: 250px;
	height: 325px;
	float: left;
	display:inline;
	position: relative;
}

#div3 {
	margin-top: 30px;
	margin-left: 2px;
	width: 250px;
	height: 325px;
	float: left;
}

.a_1,
.a_2 {
	position: absolute;
	top: 0;
	color:#fff;
	text-align:center;
	height:30px;
	line-height:30px;
}

.a_1 {
	left: 0;
	background:#3366cc;
}

.a_2 {
	right: 0;
	background:#ff6600;
}

.vote input {
	padding-top: 20px;
	width: 250px;
	position: absolute;
	color: #fff;
	border-radius: 1rem;
	text-decoration: none;
	padding: 1rem 2rem;
	margin-bottom: 1rem;
	min-width: 10rem;
	text-align: center;
	background-color: #6a4;
	border:0;
	cursor:pointer;
}

.diaphane {
	color: #000;
	margin:10px 0;
	text-align:center;
}

到此這篇關(guān)于基于JS實現(xiàn)一個簡單的投票demo的文章就介紹到這了,更多相關(guān)JS投票內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: