Html5转盘

原创已于 2025-07-10 18:22:37 修改 · 8.3k 阅读
35 ·
CC 4.0 BY-SA版权
文章标签：
#html5 #css #javascript
于 2020-07-27 14:04:53 首次发布
笔记专栏收录该内容
13 篇文章
订阅专栏
该文章已生成可运行项目，
优化：

【2025/07/10】增加设置必中项目，增加历史记录显示
【2025/05/19】增加注释。
【2023/02/04】支持自定义项目数量，最少2项。
效果图：

在这里插入图片描述

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>转盘</title>

    <style type="text/css">
        body {
            text-align: center;
        }

        button {
            cursor: pointer;
        }

        .box {
            width: 500px;
            height: 500px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 5px solid black;
            border-radius: 50%;
            background: rgba(128, 128, 128, 0.49);
            overflow: hidden;
            position: relative;
            transition: all 3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
        }

        .pointer {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9;
        }

        .pointer-bar {
            width: 60px;
            height: 25px;
            background: white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(0, -50%);
        }

        .pointer-cursor {
            width: 25px;
            height: 25px;
            position: absolute;
            left: 85px;
            top: 50%;
            transform: translate(-50%, -50%) rotateZ(45deg);
            background: white;
        }

        .part {
            height: 100%;
            width: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            transform-origin: left center;
            z-index: 1;
        }

        .bg {
            width: 100%;
            height: 100%;
        }

        .title {
            transform: translate(0, -50%);
            transform-origin: left top;
            width: 100%;
            height: auto;
            text-align: center;
            font-size: 30px;
            color: white;
            position: absolute;
            top: 50%;
            left: 0;
            padding-left: 85px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .winner {
            font-size: 30px;
            font-weight: bold;
            height: 50px;
        }

        .history-list {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
        }

        .history-item {
            font-size: 14px;
            margin: 10px;
            padding: 5px;
            color: white;
        }
    </style>
</head>

<body>
<div class="box">
    <div class="main" ontransitionend="end()">
        <div id="temp" class="part" style="display: none;">
            <div class="bg"></div>
            <div class="title"></div>
        </div>
    </div>

    <div class="pointer">
        <div class="pointer-bar"></div>
        <div class="pointer-cursor"></div>
    </div>
</div>

<button onclick="start()">开始</button>
<div class="winner"></div>
<div class="history-list"></div>

<script type="text/javascript">
    // 奖品列表
    var list = [];

    // 模拟生成12个奖品
    for (var i = 0; i < 12; i++) {
        list.push({
            title: '奖品' + (i + 1),
            color: randomColor()
        });
    }

    // 设置奖品列表里必中奖品的下标，如果设置了多个就随机选其中一个，为空就全部随机
    var winList = [0, 5];   // 奖品1或者奖品6必中

    // 主转盘元素
    var main = document.querySelector('.main');

    // 奖品项元素模板
    var temp = document.querySelector('#temp');

    // 生成随机数
    function random(num) {
        return Math.floor(Math.random() * num);
    }

    // 生成随机颜色
    function randomColor() {
        return 'rgb(' + random(250) + ', ' + random(250) + ', ' + random(250) + ')';
    }

    // 每一项奖品所占的角度
    var perAngle = 360 / list.length;

    // 遍历奖品列表生成转盘
    for (var j in list) {
        var item = list[j];

        // 复制模板副本，生成新的奖品项元素
        var newNode = temp.cloneNode(true);
        newNode.style.display = 'block';

        // 设置角度
        newNode.style.transform = 'rotateZ(' + (perAngle * j + perAngle / 2) + 'deg)';

        // 设置颜色
        newNode.querySelector('.bg').style.background = item.color;

        // 设置扇形
        if (list.length > 2) {
            var p = perAngle / 2; // 每份的角度两等分
            var d = Math.tan(p * Math.PI / 180) * 100; // 对边的长度
            var x = (100 - d) / 2; // 每份对边实际百分比
            newNode.style.clipPath = `polygon(0% 50%, 100% ${x}%, 100% ${100 - x}%)`;
        }

        newNode.querySelector('.title').innerHTML = item.title;

        main.appendChild(newNode);
    }

    // 运行标识
    var isRunning = false;

    // 累计旋转角度
    var rotate = 0;

    // 开始方法
    function start() {
        // 如果运行中，阻止执行
        if (isRunning) {
            console.warn('isRunning');
            return;
        }

        isRunning = true;

        document.querySelector('.winner').innerHTML = '';

        var r;  // 当次旋转角度

        if (winList.length > 0) {   // 如果设置了必中奖品
            var win = winList[0];
            if (winList.length > 1) {
                // 在设置列表里随机一个
                win = winList[random(winList.length)];
            }
            console.log(win);
            // 找到该必中下标对应的旋转角度
            r = (win * perAngle + 360 - (rotate % 360)) % 360 + random(perAngle);

        } else {   // 随机生成
            // 随机生成旋转角度
            r = random(360);
        }

        console.log(r);

        // 多转3圈
        rotate += r + 360 * 3;

        main.style.transform = 'rotateZ(-' + rotate + 'deg)';
    }

    // 结束方法，旋转动画结束，transitionend事件触发
    function end() {
        isRunning = false;

        console.log(rotate);

        // 根据旋转角度找到目标奖品
        var index = Math.floor(rotate / perAngle) % list.length;

        var color = list[index].color;

        var winner = list[index];
        var $el = document.querySelector('.winner');
        $el.innerHTML = '结果：' + winner.title;
        $el.style.color = color;

        var h = document.createElement('div');
        h.className = 'history-item';
        h.innerHTML = winner.title;
        h.style.background = color;
        document.querySelector('.history-list').prepend(h);
    }
</script>
</body>
</html>
本文章已经生成可运行项目