-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path抽奖.html
228 lines (207 loc) · 7.07 KB
/
抽奖.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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html>
<head>
<title>抽奖工具</title>
<style>
/* 在这里添加CSS样式 */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.wheel {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.wheel:before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: #ff7675;
border-radius: 50%;
}
.pointer {
position: absolute;
top: calc(50% - 5px);
left: -5px;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
transform-origin: 50% 50%;
}
.spin-btn {
display: block;
width: 160px;
margin: 40px auto 0;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
.prize-list {
margin-top: 40px;
text-align: center;
}
.prize-list li {
display: inline-block;
margin: 0 10px;
font-size: 14px;
color: #666666;
}
.customize-area {
margin-top: 40px;
}
.customize-form {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.customize-form input[type="text"],
.customize-form input[type="number"] {
height: 28px;
padding: 5px;
margin-right: 10px;
border: 1px solid #cccccc;
border-radius: 3px;
}
.customize-form button {
padding: 6px 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>抽奖工具</h1>
<h3>3秒后才出结果哦</h3>
<div class="wheel"></div>
<div class="pointer"></div>
<button class="spin-btn">开始抽奖</button>
<ul class="prize-list"></ul>
<div class="customize-area">
<h2>自定义奖品和中奖概率</h2>
<div class="customize-form">
<input type="text" id="prizeName" placeholder="奖品名称">
<input type="number" id="probability" step="0.01" placeholder="中奖概率 (0-1)">
<button id="addPrizeBtn">添加奖品</button>
</div>
</div>
</div>
<script>
const spinBtn = document.querySelector('.spin-btn');
const wheel = document.querySelector('.wheel');
const pointer = document.querySelector('.pointer');
const prizeList = document.querySelector('.prize-list');
const addPrizeBtn = document.querySelector('#addPrizeBtn');
const prizeNameInput = document.querySelector('#prizeName');
const probabilityInput = document.querySelector('#probability');
let prizes = [];
function createWheel() {
const colors = [
'#ff7675',
'#0984e3',
'#6c5ce7',
'#fdcb6e',
'#00cec9',
'#55efc4',
'#fab1a0',
'#d63031',
'#192a56',
'#00b894'
];
wheel.innerHTML = '';
let startAngle = 0;
for (let i = 0; i < prizes.length; i++) {
const prize = prizes[i];
const sliceAngle = 360 * prize.probability;
const endAngle = startAngle + sliceAngle;
const slice = document.createElement('div');
slice.classList.add('slice');
slice.style.transform = `rotate(${startAngle}deg)`;
slice.style.background = colors[i % colors.length];
const text = document.createElement('div');
text.classList.add('text');
text.innerHTML = prize.name;
slice.appendChild(text);
wheel.appendChild(slice);
startAngle = endAngle;
}
}
function getRandomPrize() {
const randomNum = Math.random();
let cumulativeProbability = 0;
for (const prize of prizes) {
cumulativeProbability += prize.probability;
if (randomNum <= cumulativeProbability) {
return prize;
}
}
return null;
}
function rotateWheel() {
const degrees = 360; // 旋转一圈
const randomPrize = getRandomPrize();
const prizeIndex = prizes.indexOf(randomPrize);
const sliceAngle = 360 / prizes.length;
const rotateAngle = degrees + (sliceAngle * prizeIndex);
wheel.style.transform = `rotate(${-rotateAngle}deg)`;
setTimeout(() => {
if (randomPrize) {
alert(`恭喜您获得了${randomPrize.name}！`);
}
}, 5000);
}
spinBtn.addEventListener('click', rotateWheel);
function createPrizeList() {
prizeList.innerHTML = '';
for (const prize of prizes) {
const li = document.createElement('li');
li.textContent = `${prize.name} (${(prize.probability * 100).toFixed(2)}%)`;
prizeList.appendChild(li);
}
}
addPrizeBtn.addEventListener('click', () => {
const prizeName = prizeNameInput.value;
const probability = parseFloat(probabilityInput.value);
// 验证输入的值是否合法
if (!prizeName || isNaN(probability) || probability < 0 || probability > 1) {
alert('请输入有效的奖品名称和中奖概率！');
return;
}
const newPrize = { name: prizeName, probability: probability };
prizes.push(newPrize);
prizeNameInput.value = '';
probabilityInput.value = '';
createWheel();
createPrizeList();
});
</script>
</body>
</html>