网页实现前端轮盘抽奖

参考链接

Luckydraw/index.html at main · alltrue6/Luckydraw (github.com)

实现结果如下

代码如下：

创建了一个旋转抽奖盘，用户点击“开始抽奖”按钮后，抽奖盘会旋转并最终停止在一个随机的奖项上，并显示抽中的奖品。

引入jQuery库:
- 使用CDN引入jQuery库，方便后续进行DOM操作。
初始化变量:
- getEle：快捷方式，用于通过类名获取DOM元素。
- result：表示显示结果的DOM元素。
- onRotation：布尔值，标记抽奖盘是否正在旋转，防止重复点击。
- reward：包含所有奖品名称的数组。
- pointer：表示“开始抽奖”按钮的jQuery对象。
- panel：包含所有扇形区域的父元素。
清空旧的扇形区域:
- 使用jQuery的find方法清空之前的扇形区域（如果有）。
创建新的扇形区域:
- 根据奖品数量计算每个扇形的角度。
- 动态生成每个扇形区域及其内部的文字，并设置相应的旋转角度和位置，使得每个扇形均匀分布在圆周上。
- 将这些扇形区域添加到抽奖盘中。
添加抽奖指针:
- 将“开始抽奖”按钮添加到抽奖盘中。
定义抽奖逻辑:
- getReward函数：这是一个闭包函数，用于生成一个随机旋转角度，并计算抽中的奖品。
- 每次调用此函数时，都会生成一个随机的旋转角度（1080度到1440度之间，即3到4圈），并根据最终停下的位置确定奖品。
绑定点击事件:
- pointer.on('click')：当用户点击“开始抽奖”按钮时，检查是否正在旋转，如果不是，则调用getReward函数生成随机旋转角度和奖品，更新结果并开始旋转。
绑定旋转结束事件:
- pointer.on('transitionend')：当旋转动画结束时，显示抽中的奖品，并允许用户再次点击进行抽奖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幸运大转盘</title>
    <style>
        * { /* 重置默认样式 */
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            user-select: none;
        }

        .wrapper {
            position: relative;
            height: 200px;
            width: 200px;
            padding: 20px;
            margin: 20px;
            background-color: #ff5555;
            box-shadow: #000000 0px 0px 10px;
            border-radius: 50%;
        }


        .panel {
            position: relative;
            height: 200px;
            width: 200px;
            background-color: #b7b7b7;
            border-radius: 100px;
        }

        .sector {
            position: absolute;
            left: 100px;
            top: 0px;
            width: 100px;
            height: 200px;
            font-size: 14px;
            border-radius: 0px 100px 100px 0;
            overflow: hidden;
            transform-origin: left center;
        }

        .sector:nth-child(2n+1) .sector-inner {
            background: #fef6e0;
        }

        .sector:nth-child(2n) .sector-inner {
            background: #ffffff;
        }

        .sector-inner {
            text-align: center;
            display: block;
            width: 40px;
            padding: 5px 3px 0 57px;
            height: 195px;
            transform-origin: right center;
            border-radius: 100px 0 0 100px;
        }

        .sector-inner span {
            display: block;
            transform-origin: center;
            color: #d46854;
        }

        .pointer {
            position: absolute;
            left: 79px;
            top: 79px;
            z-index: 10;
            height: 30px;
            width: 30px;
            padding: 6px;
            color: #fff899;
            line-height: 15px;
            font-size: 12px;
            text-align: center;
            background-color: #ff5350;
            border-radius: 50%;
            border: 1px solid #ff5350;
            transition: transform 3s cubic-bezier(.2, .93, .43, 1);
        }

        .pointer::after {
            content: '';
            position: absolute;
            left: 14px;
            top: -24px;
            border-width: 12px 6px;
            border-style: solid;
            border-color: transparent;
            border-bottom-color: #ff5350;
            transform-origin: center;
        }

        .result {
            margin: 20px 60px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="panel">
    </div>
</div>
<div class="result"></div>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script>
    let getEle = document.getElementsByClassName.bind(document);

    let result = $('.result');
    let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了
    let reward = ['斗破苍穹', "斗罗大陆", "原神", "王者荣耀", "星穹铁道", "哔哩哔哩", "宫本武藏"];
    let pointer = $('<div class="pointer">开始抽奖</div>');
    let panel = $('.panel');

    // 清空所有 class 为 sector 的 div 元素
    panel.find('.sector').remove();

    // 扇形区域个数和每个扇形的角度
    let sectorCount = reward.length;
    let angle = 360 / sectorCount;

    for (let i = 0; i < reward.length; i++) {
        let sector = $('<div class="sector"></div>');
        let sectorInner = $('<div class="sector-inner"></div>');
        let span = $('<span>' + reward[i] + '</span>');
        let rotateAngle = -angle / 2 + angle * i;
        sectorInner.css('transform', `translateX(-100px) rotate(${angle}deg)`);
        span.css('transform', `rotate(-${angle / 2}deg)`);
        sectorInner.append(span);
        sector.append(sectorInner);
        panel.append(sector);
        sector.css('transform', `rotate(${rotateAngle}deg)`);
    }

    // 添加抽奖指针
    panel.append(pointer);

    let getReward = (function () {
        let currentDeg = 0;
        return function () {
            let rotateDeg = Math.random() * 360 + 1080;
            currentDeg += rotateDeg;
            let rewardText = reward[Math.floor((currentDeg + angle / 2) % 360 / angle)]
            return {
                deg: currentDeg,
                text: '恭喜抽中: ' + rewardText
            }
        }
    })();

    pointer.on('click', function () {
        if (onRotation) return;
        console.log('开始抽奖');
        onRotation = true;
        let nextStatus = getReward();
        result.text(nextStatus.text);
        result.css('display', 'none');
        pointer.css('transform', `rotateZ(${nextStatus.deg}deg)`);
    });

    pointer.on('transitionend', function () {
        console.log('抽奖结束');
        setTimeout(function () {
            onRotation = false;
            result.css('display', 'block');
        }, 300);
    });
</script>
</body>
</html>

posted on 2024-06-20 19:47 swuxyj 阅读(469) 评论(0) 编辑收藏举报

刷新页面返回顶部

这个是标题，但是为什么要有标题

网页实现前端轮盘抽奖

导航