用js做个转盘

样式

 .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);}

css

 睡觉吃饭睡觉吃饭点击开始选择

js

const arrow = document.querySelector('.arrow')let randomRotateList = 0document.querySelector('.start').addEventListener('click', function () {let randomRotate = Math.ceil(Math.random() * 3600 + 1080)randomRotateList += randomRotatearrow.style.transform = `rotate(${randomRotateList}deg)`})

效果