Html5转盘

zity_chow
已于 2025-05-19 18:22:05 修改
阅读量7.7k
点赞数 16
分类专栏：笔记文章标签： html5 css javascript
于 2020-07-27 14:04:53 首次发布
本文链接：https://blog.csdn.net/zity_chow/article/details/107610522
版权
笔记专栏收录该内容
13 篇文章
订阅专栏
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;
            color: red;
            font-weight: bold;
        }
    </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>

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

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

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

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

    // 生成随机数
    function random(num) {
        return 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 = random(360);

        // 多转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 winner = list[index];
        document.querySelector('.winner').innerHTML = '结果：' + winner.title;
    }
</script>
</body>
</html>