吃啥大转盘

经常跟朋友出去吃饭，选择太困难了所以写了个简单的转盘，直接copy到txt文本然后把文件后缀改成html即可。

需要换食物直接在文件中找到 list 值按照格式替换一下即可。

效果：
在这里插入图片描述

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

相关阅读:
JavaScript 设计模式之代理模式
 2022/8/2 考试总结
 大数据在电力行业的应用案例100讲（十七）-基于微服务架构的营配贯通设计
 教育、卫生和社会服务-省级面板数据数据（1994-2019年）
进程之间是怎么协作的（软件实现方法）
Python统计学08——一元线性回归
 java中的对象克隆（浅克隆和深克隆）
【报错】在浏览器输入localhost无法显示想要的内容
 使用idea如何打开python项目
 spring bean 生命周期
原文地址：https://blog.csdn.net/weixin_50520054/article/details/134294437