<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽獎(jiǎng)</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body,
.modal-cover {
width: 100%;
height: 100%;
}
body {
background: url('./img/background.jpg') no-repeat center;
background-size: 100% 100%;
overflow: hidden;
}
.container {
width: 90%;
height: 300px;
/* width: 831px; */
height: 336px;
/* border: 1px solid; */
display: flex;
flex-wrap: wrap;
margin: 100px auto;
border-radius: 6px;
background: #fff;
padding: 5px 0 5px 10px;
}
.item {
width: 30%;
height: 30%;
/* outline: 1px solid black; */
display: flex;
justify-content: center;
align-items: center;
font-size: 18;
border-radius: 2px;
/* border: 1px solid; */
margin: 4px;
box-shadow: 1px 1px 14px #ccc;
position: relative;
}
.cover {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
border-radius: 2px;
}
.item-box {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.btn-box {
background-color: #faa5b6;
cursor: pointer;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 100px;
}
.modal {
width: 80%;
height: 150px;
position: fixed;
top: 50%;
left: 50%;
background: rgba(255, 255, 255, 255);
border-radius: 4px;
transform: translate(-50%, -50%);
text-align: center;
padding: 20px 10px 10px;
z-index: 2;
}
.modal .confirm-btn {
background: pink;
width: 170px;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
margin: 0 auto;
margin-top: 20px;
cursor: pointer;
border-radius: 4px;
}
.modal-cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
<div class="btn-box item">
<div class="cover" style="background: none;"></div>
<div class="item-box">
開始抽獎(jiǎng)
</div>
</div>
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
<div class="item">
<div class="cover"></div>
<div class="item-box"></div>
</div>
</div>
<div class="modal-cover"></div>
<div class="modal" style="display: none;">
<span></span>
<div class="confirm-btn">不信邪！再試一次！</div>
</div>
</body>
<script src="./index.js"></script>
</html>
// 封裝工具函數(shù)
const util = {
getELe: (str) => {
return document.querySelector(str)
},
getELes: (str) => {
return document.querySelectorAll(str)
}
}
let items = util.getELes(".item-box"),
covers = util.getELes('.cover'),
imgArr = ['CHANEL', 'Dior', 'givenchy', 'dabao', 'empty', 'lamer', 'lancome', 'yashilandai', 'YSL', ]
for (let i = 0; i < items.length; i++) {
if (imgArr[i] === 'empty') continue;
let el = items[i];
el.style.backgroundImage = `url(./img/${imgArr[i]}.png)`
}
let modal = util.getELe('.modal'),
mask = util.getELe('.modal-cover'),
modalInner = util.getELe('.modal span');
let tryBtn = util.getELe('.confirm-btn');
// 存放每一個(gè)獎(jiǎng)項(xiàng)的下標(biāo)
let arr = [0, 1, 2, 5, 8, 7, 6, 3],
i = 0,
count = 0,
stopTimer;
let rand = Math.floor(Math.random() * 8 + 50);
const rotate = () => {
// 先給所有的獎(jiǎng)項(xiàng)盒子加蒙層
for (let j = 0; j < arr.length; j++) {
covers[arr[j]].style.background = 'rgba(0, 0, 0, 0.3)';
}
// 將當(dāng)前獎(jiǎng)項(xiàng)的遮罩層去除
covers[arr[i]].style.background = 'none';
i++;
if (i === arr.length) {
i = 0;
}
// 通過count調(diào)整旋轉(zhuǎn)速度
count++;
// 根據(jù)count 重新調(diào)整計(jì)時(shí)器速度
if (count === 5 || count === 45) {
clearInterval(stopTimer);
stopTimer = setInterval(rotate, 200);
}
if (count === 10 || count === 35) {
clearInterval(stopTimer);
stopTimer = setInterval(rotate, 100);
}
if (count === 15) {
clearInterval(stopTimer);
stopTimer = setInterval(rotate, 50);
}
// 固定抽中某個(gè)獎(jiǎng)項(xiàng)
// if (count === 40) {
// clearInterval(stopTimer);
// count = 0;
// rand = 0;
// setTimeout(() => {
// modalInner.innerText = '親！恭喜你中獎(jiǎng)大寶SOD蜜一瓶！^_^ 😄';
// modal.style.display = 'block'
// mask.style.display = 'block'
// }, 500);
// }
// 當(dāng)?shù)扔谏厦娴碾S機(jī)數(shù)時(shí)
if (count === rand) {
clearInterval(stopTimer);
}
// 點(diǎn)擊再試一次
tryBtn.addEventListener('click', () => {
modal.style.display = 'none'
mask.style.display = 'none'
})
}
// 給開始按鈕綁定點(diǎn)擊事件 點(diǎn)擊后執(zhí)行 rotate
const start = () => {
console.log(count)
clearInterval(stopTimer);
stopTimer = setInterval(rotate, 300);
}
covers[4].addEventListener("click", start);
如果想設(shè)置固定抽中某個(gè)獎(jiǎng)項(xiàng)，// if (count === 40) 這個(gè)count的值需要你自己去算一下，圖片自己選幾個(gè)。
代碼copy可直接運(yùn)行。
最終效果，有點(diǎn)丑。你們想玩的自己發(fā)揮下吧。
到此這篇關(guān)于html5實(shí)現(xiàn)九宮格抽獎(jiǎng)可固定抽中某項(xiàng)獎(jiǎng)品的文章就介紹到這了,更多相關(guān)html5九宮格抽獎(jiǎng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
