js实现公司年会抽奖活动（亲测可用）

一般到年底大大小小公司都有会抽奖活动，一般都是一等奖、二等奖只有一个，话不多说，直接上效果图和代码。

HTML：

    <ul class="list"></ul>
    <button class="start">点击开始抽奖</button>
    <button class="end">结束抽奖</button>
    <div></div>

CSS：

        .active {
            background: pink;
            color: rgb(58, 244, 41);
        }

        .list {
            list-style-type: none;
            margin: 20px 0;
        }

        li {
            background: #eee;
            border: 1px solid #eee;
            border-radius: 5px;
            width: 200px;
            margin: 10px 0;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #333;
        }

        button {
            width: 200px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            border: 1px solid #eee;
        }

        div {
            margin-top: 30px;
        }

script：

        let arr = ['苹果14', '苹果电脑', '安慰奖', '500元现金', '精品礼品一份', 
                    '100元现金红包'] // 奖励数组
        let start = document.querySelector('.start') // 开始抽奖按钮
        let end = document.querySelector('.end') // 结束抽奖按钮
        let box = document.querySelector('.list') // ul元素
        let box1 = document.querySelector('div') // div元素
        let array = [] // 抽到的奖励放的数组
        let random; // 随机数
        let reward; // 奖励值
        let timer; // 防抖函数
        let flag = false; // 是否在抽奖中

        // 渲染奖励品
        arr.forEach(item => {
            let li = document.createElement('li') // 创建li元素
            li.innerText = item // 给li元素写入内容
            box.appendChild(li) // 添加到ul元素中
        })

        // 添加高亮
        function list() {
            let list = document.querySelectorAll('li') // 获取所有li标签
            // 遍历所有li元素，先删除高亮标签，在添加目前选中的标签添加高亮
            list.forEach((item, index) => {
                item.classList.remove('active')
            })
            list[random].classList.add('active')
        }

        // 添加到array奖励数组逻辑 点击结束抽奖执行
        function fn() {
            reward = arr[random] // 奖励
            list() // 添加高亮
            let isReward = array.indexOf(reward) // 查找array数组内是否包含
            if (isReward == -1 || reward == '安慰奖' || reward == '精品礼品一份' || 
                 reward =='100元现金红包') {
                array.push(reward) // 添加到array数组
            } else {
                return fn() // 如果存在则继续生成随机奖励
            }
            console.log(array);
        }

        // 开始抽奖按钮
        start.onclick = () => {
            // 判断是否正在抽奖
            if (flag) return alert('正在抽奖，请先结束抽奖')
            // 点击开始抽奖置为true
            flag = true
            // 每0.1秒刷新一次随机数并添加高亮
            timer = setInterval(() => {
                random = parseInt(Math.random() * arr.length)
                list()
            }, 10);
        }

        // 结束抽奖按钮 
        end.onclick = () => {
            console.log(flag);
            // 如果已经点击过开始抽奖，否则提示先点击抽奖
            if (flag) {
                fn() // 获取本次抽奖抽到的奖励
                clearInterval(timer) // 清除定时器（开始抽奖每0.1秒刷新的定时器）
                // 遍历成功奖励数组渲染页面
                array.forEach(item => {
                    box1.innerText = '您获得的奖励有：' + array.join('、')
                })
                // 抽奖结束，flag置为false，表示本次抽奖结束
                flag = false
            } else {
                alert('先点击开始抽奖')
            }
        }

如果有特殊要求，要设置抽奖次数。

HTML：

    <p></p>
    <ul class="list"></ul>
    <button class="start">点击开始抽奖</button>
    <button class="end">结束抽奖</button>
    <div></div>

script：

        let arr = ['苹果14', '苹果电脑', '安慰奖', '500元现金', '精品礼品一份', 
                    '100元现金红包'] // 奖励数组
        let start = document.querySelector('.start') // 开始抽奖按钮
        let end = document.querySelector('.end') // 结束抽奖按钮
        let p = document.querySelector('p') // p元素
        let box = document.querySelector('.list') // ul元素
        let box1 = document.querySelector('div') // div元素
        let array = [] // 抽到的奖励放的数组
        let random; // 随机数
        let reward; // 奖励值
        let timer; // 防抖函数
        let flag = false; // 是否在抽奖中
        let num; // 抽奖次数
        num = arr.length
        p.innerText = `您目前还有${num}次抽奖机会`;  // 渲染p标签

        // 渲染奖励品
        arr.forEach(item => {
            let li = document.createElement('li') // 创建li元素
            li.innerText = item // 给li元素写入内容
            box.appendChild(li) // 添加到ul元素中
        })

        // 添加高亮
        function list() {
            let list = document.querySelectorAll('li') // 获取所有li标签
            // 遍历所有li元素，先删除高亮标签，在添加目前选中的标签添加高亮
            list.forEach((item, index) => {
                item.classList.remove('active')
            })
            list[random].classList.add('active')
        }

        // 添加到array奖励数组逻辑 点击结束抽奖执行
        function fn() {
            reward = arr[random] // 奖励
            list() // 添加高亮
            let isReward = array.indexOf(reward) // 查找array数组内是否包含
            if (isReward == -1 || reward == '安慰奖' || reward == '精品礼品一份' || 
                 reward =='100元现金红包') {
                array.push(reward) // 添加到array数组
            } else {
                return fn() // 如果存在则继续生成随机奖励
            }
            console.log(array);
        }

        // 开始抽奖按钮
        start.onclick = () => {
            // 判断是否正在抽奖
            if (flag) return alert('正在抽奖，请先结束抽奖')
            if(num > 0) return alert('没有抽奖机会了')
            // 点击开始抽奖置为true
            flag = true
            num--
            p.innerText = `您目前还有${num}次抽奖机会`  // 渲染p标签
            // 每0.1秒刷新一次随机数并添加高亮
            timer = setInterval(() => {
                random = parseInt(Math.random() * arr.length)
                list()
            }, 10);
        }

        // 结束抽奖按钮 
        end.onclick = () => {
            if(num > 0) return alert('没有抽奖机会了')
            console.log(flag);
            // 如果已经点击过开始抽奖，否则提示先点击抽奖
            if (flag) {
                fn() // 获取本次抽奖抽到的奖励
                clearInterval(timer) // 清除定时器（开始抽奖每0.1秒刷新的定时器）
                // 遍历成功奖励数组渲染页面
                array.forEach(item => {
                    box1.innerText = '您获得的奖励有：' + array.join('、')
                })
                // 抽奖结束，flag置为false，表示本次抽奖结束
                flag = false
            } else {
                alert('先点击开始抽奖')
            }
        }

原创不易，

如果可用，

点赞关注，

有问题欢迎在评论区留言讨论。

扫描二维码关注公众号，回复： 15061996 查看本文章