h5抽奖的弹框制作
html5实现九宫格抽奖可固定抽中某项奖品原生js写的一个九宫格抽奖程序 （周末在家闲着也是闲着）
我写的这个抽奖是拿来整蛊我女朋友， 因为每次抽奖的结果都是同一个。。
哈哈哈哈哈哈哈哈哈哈哈哈哈
我会附上正常抽奖的的代码和固定只能抽到某一个的代码；
HTML代码如下 ⤵️
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body,
.modal-cover {
width: 100%;
height: 100%;
}
body {
background: url('./img/background.jpg" alt="h5抽奖的弹框制作（html5实现九宫格抽奖可固定抽中某项奖品）" border="0" />
js代码👇
// 封装工具函数
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]}.jpg" alt="h5抽奖的弹框制作（html5实现九宫格抽奖可固定抽中某项奖品）" border="0" />
如果想设置固定抽中某个奖项，// if (count === 40) 这个count的值需要你自己去算一下，图片自己选几个。
代码copy可直接运行。
最终效果，有点丑。你们想玩的自己发挥下吧。
到此这篇关于html5实现九宫格抽奖可固定抽中某项奖品的文章就介绍到这了,更多相关html5九宫格抽奖内容请搜索开心学习网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持开心学习网！