用js做个转盘

样式

javascript 复制代码
 <style>
        .wheel {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
            border-radius: 50%;
            overflow: hidden;
            margin: auto;
        }

        .slice {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            border: 200px solid red;
            /* border-width: 100px 100px; */
            border-color: red transparent transparent transparent;
        }

        .left {

            transform: rotate(90deg);
            border-color: black transparent transparent transparent;
        }

        .bottom {

            transform: rotate(180deg);
            border-color: green transparent transparent transparent;
        }

        .right {
            transform: rotate(270deg);
            border-color: yellow transparent transparent transparent;
        }


        span {
            width: 100px;
            height: 100px;
            display: block;
            position: absolute;
            color: pink;
            font-size: 30px;
            z-index: 10;
            top: -180px;
            left: -30px;
        }

        .arrow {

            position: absolute;
            right: 190px;
            top: 0px;
            transition: all;
            transition-duration: 5s;
            transform-origin: center 200px;
        }

        .arrow-header {

            width: 0;
            height: 0;
            border: solid;
            border-width: 100px 10px;
            border-color: transparent transparent white transparent;
            z-index: 15;
        }

        .arrow-footer {
            margin-top: -10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
        }


        .arrow:hover {
            transform: rotate(360deg);

        }
    </style>

css

javascript 复制代码
 <div class="wheel">
        <div class="slice top">
            <span>睡觉</span>
        </div>
        <div class="slice left"><span>吃饭</span></div>
        <div class="slice bottom"><span>睡觉</span></div>
        <div class="slice right"><span>吃饭</span></div>
        <div class="arrow">
            <div class="arrow-header"></div>
            <div class="arrow-footer"></div>
        </div>
    </div>
    <button class="start">点击开始选择</button>

js

javascript 复制代码
    <script>
        const arrow = document.querySelector('.arrow')
        let randomRotateList = 0

        document.querySelector('.start').addEventListener('click', function () {
            let randomRotate = Math.ceil(Math.random() * 3600 + 1080)
            randomRotateList += randomRotate

            arrow.style.transform = `rotate(${randomRotateList}deg)`
        })


    </script>

效果

相关推荐
蓝胖子的小叮当3 分钟前
JavaScript基础(十)对象方法总结
前端·javascript
讨厌吃蛋黄酥36 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
南方kenny39 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
海上生明月丿1 小时前
Vue 工程化
前端·javascript·vue.js
香蕉可乐荷包蛋2 小时前
排序算法 (Sorting Algorithms)-JS示例
javascript·算法·排序算法
格调UI成品3 小时前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip3 小时前
微前端框架选型
前端·javascript
一只小风华~3 小时前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰3 小时前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
程序媛李李李李李蕾4 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端