html5实现最高端的公司年会抽奖（源码）_好看的年会抽奖网页代码下载

作者：很楠不爱3 | 2024-03-06 12:50:00

踩

好看的年会抽奖网页代码下载

文章目录

1.设计来源
2.效果和源码配置
源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/135171926

html5实现最高端的公司年会抽奖（源码） html5实现最高端的公司年会抽奖（源码），可以直接配置员工信息然后使用的，实现动态配置员工信息，实现员工只能中一次奖，实现奖品可灵活配置，奖项分为特等奖、一等奖、二等奖、三等奖，也可以自己定义奖项，实现样式灵活调整，实现抽奖酷炫音效，并且有多种震撼音效可选，可以直接运index.html使用。

1.设计来源

1.1 主界面

抽奖主界面，上侧是公司活动名称，中边是员工信息（抽奖名单），下边是抽奖相关操作。
员工信息：上来把所有的员工信息加载出来，目前总共100个人员信息。
奖品信息：目前设置的四个奖项，特等奖1人，一等奖5人，二等奖10人，三等奖20人，这个可以根据自己的需求配置。
重新抽奖：清除之前的抽奖历史，重新开始计算。
抽奖配置：特等奖和一等奖一次抽一个人，二等奖和三等奖一次抽五个人，这个可以自己配置。

在这里插入图片描述

1.2 抽奖效果

抽奖效果是动态的文字切换和背景抽奖音效，图片体现不出来效果，具体效果见下面的视频演示。

1.3 中奖效果

在这里插入图片描述

中奖效果展示的是奖项内容、人数和中奖名单。动态的彩带效果，让中奖界面更加酷炫。

2.效果和源码配置

2.1 动态效果

这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的年会抽奖舞台。

html5实现最高端的公司年会抽奖（源码）

2.2 员工信息配置

目前配置了一百个人员信息，可根据自己的需求来，也可以把这块代码改为后台数据请求。如果不需要后台的，直接配置使用即可。

name:人员名称
jobno:人员编号

var priceName = [
  {
    "jobno": "10001",
    "name": "安雅萍"
  },
  {
    "jobno": "10002",
    "name": "白百合"
  },
  {
    "jobno": "10003",
    "name": "白冰"
  },
  {
    "jobno": "10004",
    "name": "陈钰琪"
  },
  {
    "jobno": "10005",
    "name": "陈冲"
  },
  {
    "jobno": "10006",
    "name": "陈红"
  },
  {
    "jobno": "10007",
    "name": "陈妍希"
  },
  {
    "jobno": "10008",
    "name": "陈意涵"
  },
  {
    "jobno": "10009",
    "name": "刘心悠"
  },
  {
    "jobno": "10010",
    "name": "马伊琍"
  },
  {
    "jobno": "10011",
    "name": "麦迪娜"
  },
  {
    "jobno": "10012",
    "name": "蒙嘉慧"
  },
  {
    "jobno": "10013",
    "name": "毛晓彤"
  },
  {
    "jobno": "10014",
    "name": "宁静"
  },
  {
    "jobno": "10015",
    "name": "刘嘉玲"
  },
  {
    "jobno": "10016",
    "name": "何泓珊"
  },
  {
    "jobno": "10017",
    "name": "林依晨"
  },
  {
    "jobno": "10018",
    "name": "李宇春"
  },
  {
    "jobno": "10019",
    "name": "迪丽热巴"
  },
  {
    "jobno": "10020",
    "name": "罗震环"
  },
  {
    "jobno": "10021",
    "name": "李亚男"
  },
  {
    "jobno": "10022",
    "name": "郭珍霓"
  },
  {
    "jobno": "10023",
    "name": "陈晓旭"
  },
  {
    "jobno": "10024",
    "name": "程瑷瑗"
  },
  {
    "jobno": "10025",
    "name": "邓家佳"
  },
  {
    "jobno": "10026",
    "name": "杜若溪"
  },
  {
    "jobno": "10027",
    "name": "范冰冰"
  },
  {
    "jobno": "10028",
    "name": "范文芳"
  },
  {
    "jobno": "10029",
    "name": "林心如"
  },
  {
    "jobno": "10030",
    "name": "高晓菲"
  },
  {
    "jobno": "10031",
    "name": "李若彤"
  },
  {
    "jobno": "10032",
    "name": "甘婷婷"
  },
  {
    "jobno": "10033",
    "name": "黄圣依"
  },
  {
    "jobno": "10034",
    "name": "刘雨欣"
  },
  {
    "jobno": "10035",
    "name": "何曼婷"
  },
  {
    "jobno": "10036",
    "name": "韩雪"
  },
  {
    "jobno": "10037",
    "name": "盖丽丽"
  },
  {
    "jobno": "10038",
    "name": "李湘"
  },
  {
    "jobno": "10039",
    "name": "郭雪芙"
  },
  {
    "jobno": "10040",
    "name": "关之琳"
  },
  {
    "jobno": "10041",
    "name": "陈乔恩"
  },
  {
    "jobno": "10042",
    "name": "高圆圆"
  },
  {
    "jobno": "10043",
    "name": "李冰冰"
  },
  {
    "jobno": "10044",
    "name": "刘诗诗"
  },
  {
    "jobno": "10045",
    "name": "林志玲"
  },
  {
    "jobno": "10046",
    "name": "巩俐"
  },
  {
    "jobno": "10047",
    "name": "高露"
  },
  {
    "jobno": "10048",
    "name": "蔡依林"
  },
  {
    "jobno": "10049",
    "name": "陈美琪"
  },
  {
    "jobno": "10050",
    "name": "梅艳芳"
  },
  {
    "jobno": "10051",
    "name": "蓝洁瑛"
  },
  {
    "jobno": "10052",
    "name": "何琢言"
  },
  {
    "jobno": "10053",
    "name": "欧阳娜娜"
  },
  {
    "jobno": "10054",
    "name": "蒋依依"
  },
  {
    "jobno": "10055",
    "name": "吉克隽逸"
  },
  {
    "jobno": "10056",
    "name": "江铠同"
  },
  {
    "jobno": "10057",
    "name": "江疏影"
  },
  {
    "jobno": "10058",
    "name": "李萌萌"
  },
  {
    "jobno": "10059",
    "name": "莫文蔚"
  },
  {
    "jobno": "10060",
    "name": "刘奕儿"
  },
  {
    "jobno": "10061",
    "name": "李嘉欣"
  },
  {
    "jobno": "10062",
    "name": "李彩桦"
  },
  {
    "jobno": "10063",
    "name": "黎美娴"
  },
  {
    "jobno": "10064",
    "name": "李小璐"
  },
  {
    "jobno": "10065",
    "name": "娄艺潇"
  },
  {
    "jobno": "10066",
    "name": "郭碧婷"
  },
  {
    "jobno": "10067",
    "name": "蔡少芬"
  },
  {
    "jobno": "10068",
    "name": "程愫"
  },
  {
    "jobno": "10069",
    "name": "刘亦菲"
  },
  {
    "jobno": "10070",
    "name": "林允儿"
  },
  {
    "jobno": "10071",
    "name": "陈紫涵"
  },
  {
    "jobno": "10072",
    "name": "韩红"
  },
  {
    "jobno": "10073",
    "name": "付梦妮"
  },
  {
    "jobno": "10074",
    "name": "郭采洁"
  },
  {
    "jobno": "10075",
    "name": "黎姿"
  },
  {
    "jobno": "10076",
    "name": "张敏"
  },
  {
    "jobno": "10077",
    "name": "梁小冰"
  },
  {
    "jobno": "10078",
    "name": "贾玲"
  },
  {
    "jobno": "10079",
    "name": "金莎"
  },
  {
    "jobno": "10080",
    "name": "倪妮"
  },
  {
    "jobno": "10081",
    "name": "金晨"
  },
  {
    "jobno": "10082",
    "name": "昆凌"
  },
  {
    "jobno": "10083",
    "name": "高洋"
  },
  {
    "jobno": "10084",
    "name": "刘涛"
  },
  {
    "jobno": "10085",
    "name": "何穂"
  },
  {
    "jobno": "10086",
    "name": "闰妮"
  },
  {
    "jobno": "10087",
    "name": "陈数"
  },
  {
    "jobno": "10088",
    "name": "董洁"
  },
  {
    "jobno": "10089",
    "name": "蒋欣"
  },
  {
    "jobno": "10090",
    "name": "李波儿"
  },
  {
    "jobno": "10091",
    "name": "楚月"
  },
  {
    "jobno": "10092",
    "name": "景甜"
  },
  {
    "jobno": "10093",
    "name": "李沁"
  },
  {
    "jobno": "10094",
    "name": "韩瑜"
  },
  {
    "jobno": "10095",
    "name": "陈瑶"
  },
  {
    "jobno": "10096",
    "name": "李晟"
  },
  {
    "jobno": "10097",
    "name": "刘雯"
  },
  {
    "jobno": "10098",
    "name": "李菲儿"
  },
  {
    "jobno": "10099",
    "name": "梁静茹"
  },
  {
    "jobno": "10100",
    "name": "李金铭"
  }
]
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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402

2.3 奖品信息配置

奖品信息可以灵活配置，showPrize传类型(人数)即可

<select id="priceItem" style="padding: 10px 20px; margin: 5px;outline: none;">
    <option value="0">特等奖：华为Mate60Pro+256G(1人)</option>
    <option value="1">一等奖：小米iPad(5人)</option>
    <option value="2">二等奖：小米扫地机器人(10人)</option>
    <option value="3">三等奖：健腹轮(20人)</option>
</select>
1
2
3
4
5
6

2.4 抽奖音效配置

可以自定义选中抽奖音效，在这块代码配置就行。

<audio src="./img/price1.mp3" autoplay loop></audio>
1

内置四种酷炫抽奖音效：
在这里插入图片描述

2.5 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0"> 
	<title>公司年会抽奖活动</title>
	<link href="css/prize.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body οncοntextmenu="return false" οndragstart="return false" onselectstart="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return false" οnmοuseup="document.selection.empty()">
	<div class="bg2">
		<span onclick="clearPri()">2024年公司年会抽奖活动</span>
	</div>
	<input id="priceinput" type="text" value="4" disabled style="display: none;" >
	<div class="pageDiv">
		<div class="leftDiv">
			<!-- 中奖人员 -->
			<div id="prizeInfo" class="leftDivson" style="display: none;">
				<table style="width:100%; height: 100%; position: absolute; margin:auto;padding:auto;border: 0px;">
					<tr>
						<td style="height: 40px;"><div style="font-weight: bold;font-size: 36px;padding: 20px;">恭 喜 以 下 员 工 中 奖</div></td>
					</tr>
					<tr>
						<td style="vertical-align: top;">
							<ul id="myul">
							</ul>
							<div style="width: 100%;text-align: center; font-size: 36px; letter-spacing:10px; line-height: 50px;">
								<span id="zjName"></span>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<!-- 抽奖人员 -->
			<div id="staffInfo" class="leftDivson">
				<table style="width:100%; height: 100%; position: absolute; margin:auto;padding:auto;border: 0px;">
					<tr style="height: 10%;">
						<td colspan="9"><div style="font-weight: bold;font-size: 36px; padding: 15px;">抽 奖 名 单</div></td>
					</tr>
				  </table>
			</div>
		</div>
		<div class="rightDiv">
			<!-- 奖项明细 -->
			<div id="prizeDetailDiv" class="rightDivson" style="background-image: url('img/guang.png');background-repeat: no-repeat;background-size: cover;display: none;">
				<div id="prizeDetailDivImg" class="rightDivsonimg">
					<div id="btnPrize" class="yxDiv" onclick="goPrize();">
						<span id="cjfont" style="padding-top: 30px; display: block;font-weight: bold;font-size: 20px;">开 始</span>
					</div>
					<div class="yxDiv1" onclick="goBack();">
						返 回
					</div>
					<div id="detaildiv" class="yxDiv1" style="display: none;" onclick="godetail();">
						详 细
					</div>
				</div>
			</div>
			<!-- 各种奖项 -->
			<div id="prizeDiv" class="rightDivson">
				<div class="btnDiv" onclick="showPrize(4);">特等奖(1人)<br/>现金1000元</div>
				<div class="btnDiv" onclick="showPrize(1);">一等奖(2人)<br/>现金500元</div>
				<div class="btnDiv" onclick="showPrize(3);">二等奖(10人)<br/>现金200元</div>
				<div style="clear: both;"></div>
			</div>
		</div>
	</div>
	<audio src="./resource/price1.mp3" autoplay loop></audio>
	<script type="text/javascript" src="./js/index.js"></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

源码下载

html5实现最高端的公司年会抽奖（源码）点击下载

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】