用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>

效果

相关推荐
别拿曾经看以后~12 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死15 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试18 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR33 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山8 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄9 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript