js抽獎

刻俄柏發表於2020-11-01
JS

js簡易抽獎

今天講下js抽獎
流程圖：
在這裡插入圖片描述

程式碼部分
首先是html部分和css佈區域性分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
			}

			.prize {
				width: 300px;
				height: 300px;
				margin: 50px auto 0 auto;
				position: relative;
				background: lightgoldenrodyellow;
			}

			.prize span {
				display: block;
				width: 100px;
				height: 100px;
				border: 1px solid #fff;
				position: absolute;
				text-align: center;
				line-height: 80px;
				background: lightsalmon;
				font-style: normal;
				color: #fff;
			}

			.btn {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				border: none;
				margin-left: -40px;
				margin-top: -40px;
				background: lightsalmon;
				outline: none;
				font-family: "微軟雅黑", Arial, sans-serif;
				font-weight: bold;
				font-size: 18px;
				color: #fff;
				cursor: pointer;
			}

			.prize span.active {
				background: lightcoral;
				color: #fff;
			}

			.prize span:nth-child(1) {
				left: 0;
			}

			.prize span:nth-child(2) {
				left: 100px;
			}

			.prize span:nth-child(3) {
				left: 200px;
			}

			.prize span:nth-child(4) {
				top: 100px;
				left: 200px;
			}

			.prize span:nth-child(5) {
				top: 200px;
				right: 0;
			}

			.prize span:nth-child(6) {
				right: 100px;
				top: 200px;
			}

			.prize span:nth-child(7) {
				right: 200px;
				top: 200px;
			}

			.prize span:nth-child(8) {
				left: 0px;
				top: 100px;
			}

			div .aa {
				background: rgb(78, 78, 78);
			}
		</style>
	</head>
	<body>
		<div class="prize">
			<span>100元現金</span>
			<span>謝謝參與</span>
			<span>50積分</span>
			<span>謝謝參與</span>
			<span>100積分</span>
			<span>謝謝參與</span>
			<span>10元現金</span>
			<span>謝謝參與</span>
			<button class="btn" id="btn">抽獎</button>
		</div>
	</body>
</html>

js實現部分


	<script type="text/javascript">
		var btn = document.getElementById("btn"); //獲取button按鈕
		var prize = document.querySelectorAll("div>span"); //獲取所有的span
		// console.log(prize) //列印span
		function getRandom(n, m) {
			return Math.floor(Math.random() * (m - n + 1) + n); //獲取隨機數
		}
		btn.onclick = function() {
			btn.setAttribute("disabled", "disabled");
			btn.style.backgroundColor = "#FFC8AD";
			btn.innerHTML = "抽獎中";
			prize.forEach(function(el, index) {
				if (index != 0) {
					el.classList.remove('aa'); // 清空上一次結果
				}
				el.classList.add('aa'); // 清空上一次結果
			})
			var needNum = -1;//獲取下標
			var rand = getRandom(1, 100);//確定隨機數
			var time = 0;//旋轉圈數
			var speed = 100;//旋轉時間
			timer = setInterval(function() {
				needNum++;//下標自加
				time++;//圈數自加
				console.log(timer)
				if (needNum > 7) {//判斷下標是否大於最後一個
					needNum = 0;
					prize[0].classList.add('aa');
					prize[7].classList.remove('aa');
				} else if (needNum == 0) {//判斷當前下標是否是0
					prize[needNum].classList.add('aa');
					prize[7].classList.remove('aa');
				} else {
					prize[needNum].classList.add('aa');
					prize[needNum - 1].classList.remove('aa');
				}
				if (time > rand) {//判斷當前圈數是否大於隨機數實現隨機抽獎
					clearInterval(timer)//清除定時器
					btn.removeAttribute("disabled");
					btn.style.backgroundColor = "lightsalmon";
					btn.innerHTML = "抽獎";
					prize.forEach(function(el, index) {
						if (index != 0) {
							el.classList.remove('aa'); // 清空所有的樣式
						}
					})
					alert('恭喜您抽中了' + prize[needNum].textContent + '!!!')
				}
			}, speed)
			// console.log(prize)
		}
	</script>

相關文章