您的位置：首页 > Web前端 > > 正文

h5抽奖的弹框制作（html5实现九宫格抽奖可固定抽中某项奖品）

更多时间：2021-10-16 00:01:32 类别：Web前端浏览量：1417

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可直接运行。
最终效果，有点丑。你们想玩的自己发挥下吧。

h5抽奖的弹框制作（html5实现九宫格抽奖可固定抽中某项奖品）

到此这篇关于html5实现九宫格抽奖可固定抽中某项奖品的文章就介绍到这了,更多相关html5九宫格抽奖内容请搜索开心学习网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持开心学习网！

标签：HTML5 九宫格抽奖

上一篇：dedecms分页修改（dedecms 自动审核会员发表的最新文章的修改方法）

下一篇：xshell服务器（如何使用Xshell连接云服务器）

您可能感兴趣

h5抽奖的弹框制作（html5实现九宫格抽奖可固定抽中某项奖品）

h5抽奖的弹框制作

热门推荐

排行榜