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

效果

相关推荐
前端拾光者15 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode1 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
Myli_ing2 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_3 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ3 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z3 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁3 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜3 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript