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

作者：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 动态效果

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

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": "李金铭"
  }
]

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>

2.4 抽奖音效配置

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

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

内置四种酷炫抽奖音效：

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>

---

源码下载

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

---

???? 💞 关注博主 带你实现畅游前后端

???? 🏰 加入社区 带你体验马航不孤单

???? 💯 神秘个人简介 带你体验不一样得介绍

???? 🎀 酷炫邀请函 带你体验高大上得邀请

---

???? ① 🉑提供云服务部署（有自己的阿里云）；
???? ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
???? 如🈶合作请联系我，期待您的联系。
????注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

---

???? 亲，码字不易，动动小手，欢迎 点赞 ? 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

---

原文地址：https://blog.csdn.net/weixin_43151418/article/details/135171926（防止抄袭，原文地址不可删除）