html实现酷炫的公司年会抽奖(附源码)

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

文章目录

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

html实现酷炫公司年会抽奖 html实现酷炫公司年会抽奖可以直接配置员工信息然后使用的实现动态配置员工信息实现员工只能中一次奖实现奖品可灵活配置实现样式灵活调整实现抽奖酷炫音效并且有多种震撼音效可选可以直接运行index.html使用。

1.设计来源

1.1 主界面

抽奖主界面上侧是公司活动名称下面分为左右两个版块左边是员工信息抽奖名单右边是奖项信息。
员工信息上来展示的12个随机抽取的员工目前总共30个人员信息。
奖品信息目前设置的三个奖项特等奖1人一等奖2人二等奖十人这个可以根据自己的需求配置。

在这里插入图片描述

1.2 抽奖效果

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

1.2 中奖效果

在这里插入图片描述
左边是中奖员工右边是中奖奖品奖品那个地方色调可以自己调有图片的psd文件直接用ps修改即可。

2.效果和源码配置

2.1 动态效果

html实现酷炫的公司年会抽奖

2.2 员工信息配置

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

staff_name:人员名称
staff_no:人员编号

var userInfo="[";
userInfo+='{"staff_name":"刘亦菲","staff_no":"0000001"},';
userInfo+='{"staff_name":"陈赫","staff_no":"0000002"},';
userInfo+='{"staff_name":"陈坤","staff_no":"0000003"},';
userInfo+='{"staff_name":"邓超","staff_no":"0000004"},';
userInfo+='{"staff_name":"胡歌","staff_no":"0000005"},';
userInfo+='{"staff_name":"胡军","staff_no":"0000006"},';
userInfo+='{"staff_name":"何炅","staff_no":"0000007"},';
userInfo+='{"staff_name":"黄渤","staff_no":"0000008"},';
userInfo+='{"staff_name":"黄磊","staff_no":"0000009"},';
userInfo+='{"staff_name":"黄晓明","staff_no":"0000010"},';
userInfo+='{"staff_name":"李晨","staff_no":"0000011"},';
userInfo+='{"staff_name":"李易峰","staff_no":"0000012"},';
userInfo+='{"staff_name":"刘昊然","staff_no":"0000013"},';
userInfo+='{"staff_name":"井柏然","staff_no":"0000014"},';
userInfo+='{"staff_name":"杨洋","staff_no":"0000015"},';
userInfo+='{"staff_name":"彭昱畅","staff_no":"0000016"},';
userInfo+='{"staff_name":"陈好","staff_no":"0000017"},';
userInfo+='{"staff_name":"高圆圆","staff_no":"0000018"},';
userInfo+='{"staff_name":"刘涛","staff_no":"0000019"},';
userInfo+='{"staff_name":"孙俪","staff_no":"0000020"},';
userInfo+='{"staff_name":"杨幂","staff_no":"0000021"},';
userInfo+='{"staff_name":"佟丽娅","staff_no":"0000022"},';
userInfo+='{"staff_name":"唐嫣","staff_no":"0000023"},';
userInfo+='{"staff_name":"汤唯","staff_no":"0000024"},';
userInfo+='{"staff_name":"霍思燕","staff_no":"0000025"},';
userInfo+='{"staff_name":"蒋勤勤","staff_no":"0000026"},';
userInfo+='{"staff_name":"杨紫","staff_no":"0000027"},';
userInfo+='{"staff_name":"张子枫","staff_no":"0000028"},';
userInfo+='{"staff_name":"关晓彤","staff_no":"0000029"},';
userInfo+='{"staff_name":"周冬雨","staff_no":"0000030"}';
userInfo+="]";

2.3 奖品信息配置

奖品信息可以灵活配置showPrize传类型即可

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

2.4 抽奖音效配置

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

<audio src="./resource/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()">2023年公司年会抽奖活动</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>

源码下载

html实现酷炫的公司年会抽奖源码 点击下载
在这里插入图片描述

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

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

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

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

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

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

原文地址https://blog.csdn.net/weixin_43151418/article/details/128640998防止抄袭原文地址不可删除

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：STM32 按键模块化

下一篇：Spring Boot 热部署

“html实现酷炫的公司年会抽奖(附源码)” 的相关文章

学习汇编-32位1年前 (2023-02-02)
HTML1年前 (2023-02-02)
前端如何调用后端接口进行数据交互（极简）1年前 (2023-02-02)
【iVX 开发 - 入门】UI 组件介绍及实操详解1年前 (2023-02-02)
MySQL数据库 | SQL语句详解_mysql sql 数据库1年前 (2023-02-02)
学习ASP.NET Core Blazor编程系列二十三——登录（2） 1年前 (2023-02-02)
Java实现BP神经网络MNIST手写数字识别1年前 (2023-02-02)
antd 3.x升4.x踩坑之路～1年前 (2023-02-02)
JavaScript 入门基础 / 概念介绍（一）1年前 (2023-02-02)
2022年最完整的人工智能入门指南_人工智能教程1年前 (2023-02-02)

阿里云国际版