原生九宮格抽獎試寫
阿新 • • 發佈：2021-12-02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.bodydom {
width: 600px;
height: 600px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
background-color: #F56C6C;
border-radius: 10px;
}
.block {
width: 25%;
height: 25%;
border: 1px solid black;
text-align: center;
font-size: 20px;
margin: 4%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: pink;
}
.block5 {
background-color: #409EFF;
cursor: pointer;
}
.frequency{
font-size:15px
}
.prize{
font-size: 25px;
margin-top: 10px;
}
</style>
</style>
<body>
<div class="bodydom">
<div class="block">鴻蒙紫氣*1</div>
<div class="block">現金百萬*1</div>
<div class="block">復活戒指*1</div>
<div class="block">謝謝參與</div>
<div class="block5 block">
<div>
<div>開始抽獎</div>
<div class='frequency'>剩餘<span id='numbers'>3</span>次</div>
</div>
</div>
<div class="block">九陽真經*1</div>
<div class="block">宇宙戰艦*1</div>
<div class="block">世界樹*1</div>
<div class="block">神祕大獎</div>
</div>
<div id='prize' style='prize'></div>
<script>
let blocks = document.getElementsByClassName("block");
let list = [0, 1, 2, 5, 8, 7, 6, 3], i = 0, count = 0, stopTimer; //list存放陣列的下標，i為下標值，預設從下標為0的開始，也就是左上角的高檔洋房一套，count用於判斷是否與隨機數相等每次加一
let randomn = Math.floor(Math.random() * 8 + 50); // 建立隨機數隨機數
let timing = function () {
// 將其他盒子都變為粉色
for (let j = 0; j < list.length; j++) {
blocks[list[j]].style.background = "pink";
}
blocks[list[i]].style.background = "white";
i++;
// 重製i的值
if (i === list.length) {
i = 0;
}
//randomn的值最大為58，最小為50
count++; // 根據count的值調整速度
// 下面的4個if根據count的值來關閉計時器和重啟計時器 改變計時器的時間間隔
if (count === 5 || count === 45) {
clearInterval(stopTimer);
stopTimer = setInterval(timing, 200);
}
if (count === 10 || count === 35) {
clearInterval(stopTimer);
stopTimer = setInterval(timing, 100);
}
if (count === 15) {
clearInterval(stopTimer);
stopTimer = setInterval(timing, 50);
}
// 當等於上面的隨機數時，停止計時器
if (count === randomn) {
clearInterval(stopTimer);
var tips=blocks[list[i-1]].innerText
if(i-1!=6){
document.getElementById("prize").innerHTML='恭喜您獲得'+tips
}else{
document.getElementById("prize").innerHTML='不要灰心，再接再厲！'
}
count = 0 //重置count 的值
let randomn = Math.floor(Math.random() * 8 + 50); // 重新獲取隨機數
blocks[4].addEventListener("click", start);//重新繫結點選事件
}
}
// 點選開始按鈕後 點選後執行 timing
let start = function () {
blocks[4].removeEventListener("click", start); // 當點選了開始按鈕後 移除點選事件 防止使用者重複點選
var numbers=document.getElementById("numbers").innerHTML
if(numbers==0){
alert('抱歉，您沒有抽獎次數！')
}else{
numbers--
document.getElementById("numbers").innerHTML=numbers
stopTimer = setInterval(timing, 300);
}
console.log(numbers)
}
blocks[4].addEventListener("click", start); //下標為4的繫結點選事件，也就是開始抽獎
</script>
</body>
</html>