经常跟朋友出去吃饭，选择太困难了所以写了个简单的转盘，直接copy到txt文本然后把文件后缀改成html即可。
需要换食物直接在文件中找到 list 值按照格式替换一下即可。
效果：
代码块：
html
<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 rotate = 0;
var random = function(num) {
return Math.random() * num;
};
var randomColor = function() {
return 'rgb(' + random(250) + ', ' + random(250) + ', ' + random(250) + ')';
};
var list = [
{ title: '华莱士', color: randomColor() },
{ title: '荣记', color: randomColor() },
{ title: '猪脚饭', color: randomColor() },
{ title: '螺蛳粉', color: randomColor() },
{ title: '麻辣烫', color: randomColor() },
{ title: '糖水', color: randomColor() },
{ title: '麦当劳', color: randomColor() },
{ title: '兰州拉面', color: randomColor() },
{ title: '木桶饭', color: randomColor() },
{ title: '再抽一次', color: randomColor() }
];
var perAngle = 360 / list.length;
var main = document.querySelector('.main');
var temp = document.querySelector('#temp');
for (var i in list) {
var item = list[i];
var newNode = temp.cloneNode(true);
newNode.style.display = 'block';
newNode.style.transform = 'rotateZ(' + (perAngle * i + perAngle / 2) + 'deg)';
newNode.querySelector('.bg').style.background = item.color;
if (list.length > 2) {
var p = this.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;
function start() {
if (isRunning) {
console.warn('isRunning');
return;
}
isRunning = true;
document.querySelector('.winner').innerHTML = '';
rotate += random(360) + 360 * 5; // 多转5圈
main.style.transform = 'rotateZ(-' + rotate + 'deg)';
}
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>