html实现名字滚动年会抽奖(附源码)

xcLeigh

已于 2022-11-14 11:40:35 修改

阅读量8.9k

点赞数 14

分类专栏： HTML5实战案例资源源码文章标签： html 前端

于 2022-11-08 15:18:16 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/127750833

版权

HTML5实战案例同时被 2 个专栏收录

143 篇文章 112 订阅

订阅专栏

资源源码

127 篇文章 94 订阅

订阅专栏

文章目录

1.html实现年会抽奖设计思路
2.动态效果及代码
- 2.1 抽奖界面动态效果展示
- 2.2 界面代码
源码下载

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

html实现名字滚动年会抽奖(附源码) html实现好看年会抽奖，奖项分为，特等奖（3人），一等奖（5人），二等奖（10人），三等奖（20人），每个奖项有独立的奖品展示，如果已抽奖，会显示抽奖的用户信息，如果没有抽奖，界面会有抽奖按钮，点击抽奖开始酷炫抽奖，员工信息不停滚动闪烁，当停止抽奖的时候，提示中奖的员工信息（名字+工号）。

1.html实现年会抽奖设计思路

1.1 抽奖主界面

主界面左侧展示的是员工信息（员工名称+员工编号），右侧是此次活动的奖项，特等奖：3人；一等奖：5人；二等奖：10人；三等奖：20人。

请添加图片描述

1.2 特等奖抽奖界面

点击上方的特等奖进入的界面，点击开始按钮，开始抽奖，具体效果，参照下面的动态效果展示。点击结束，就显示中奖人员信息。

请添加图片描述

1.2 单个抽奖中奖界面

这是中了特等奖的员工信息。

请添加图片描述

1.3 一次全抽，中奖界面

这是所有中了特等奖的员工信息。点击返回，继续抽取别的奖品。

请添加图片描述

2.动态效果及代码

2.1 抽奖界面动态效果展示

特等奖和一等奖的抽奖方式是，一个一个的出，由领导说开始，然后点击开始抽奖，领导说抽奖，然后点击结束，界面会出现一个中奖的用户信息。
二等奖和三等奖的抽奖方式是，一次全部抽出中奖用户，中奖的信息记录在缓存里面，不清缓存，一直存在，清除缓存就可以重新抽奖。

html实现名字滚动年会抽奖(源码)

2.2 界面代码

这里只展示了主界面的html代码，更多代码见文章底部的 源码下载,里面有详细的代码说明和备注。

<!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>xcLeigh - 年会抽奖</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()">
	<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: 22px;padding: 20px;">恭 喜 以 下 员 工 中 奖</div></td>
					</tr>
					<tr>
						<td style="vertical-align: top;">
							<ul id="myul">
								<!-- <li>工号:1001<br/>刘亦菲</li>
								<li>工号:1001<br/>刘亦菲</li>> -->
							</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: 22px; padding: 15px;">抽 奖 名 单</div></td>
					</tr>
					<tr style="height: 10%;">
						<td style="width:10%;"><div class="text"><span id="staff1">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff2">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff3">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff4">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff5">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff6">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff7">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff8">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff9">工号</span></div></td>
					</tr>
					<tr style="height: 10%;">
						<td style="width:10%"><div class="text"><span id="staff10">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff11">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff12">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff13">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff14">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff15">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff16">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff17">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff18">工号</span></div></td>
					</tr>
					<tr style="height: 10%;">
						<td style="width:10%"><div class="text"><span id="staff19">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff20">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff21">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff22">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff23">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff24">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff25">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff26">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff27">工号</span></div></td>
					</tr>
					<tr style="height: 10%;">
						<td style="width:10%"><div class="text"><span id="staff28">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff29">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff30">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff31">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff32">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff33">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff34">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff35">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff36">工号</span></div></td>
					</tr>
					<tr style="height: 10%;">
						<td style="width:10%"><div class="text"><span id="staff37">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff38">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff39">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff40">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff41">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff42">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff43">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff44">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff45">工号</span></div></td>
					</tr>
					<tr style="height: 10%;">
						<td style="width:10%"><div class="text"><span id="staff46">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff47">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff48">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff49">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff50">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff51">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff52">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff53">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff54">工号</span></div></td>
					</tr>
					<tr style="height: 10%;">
						<td style="width:10%"><div class="text"><span id="staff55">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff56">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff57">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff58">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff59">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff60">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff61">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff62">工号</span></div></td>
						<td style="width:10%"><div class="text"><span id="staff63">工号</span></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);">特等奖(3人)<br/>陆游记双人自选线路6天5晚（含机票、酒店、门票）</div>
				<div class="btnDiv" onclick="showPrize(1);">一等奖(5人)<br/>iPhone12Pro（256G）</div>
				<div class="btnDiv" onclick="showPrize(2);">二等奖1(5人)<br/>极米H3投影仪</div>
				<div class="btnDiv" onclick="showPrize(22);">二等奖2(5人)<br/>戴森(Dyson) 吸尘器 V11</div>
				<div class="btnDiv" onclick="showPrize(3);">三等奖1(10人)<br/>任天堂(Nintendo)Switch NS掌上游戏机</div>
				<div class="btnDiv" onclick="showPrize(33);">三等奖2(10人)<br/>乐高(LEGO)积木BUGATTI Chiron</div>
				<div style="clear: both;"></div>
			</div>
		</div>
	</div>
</body>
</html>

源码下载

html实现名字滚动年会抽奖(源码) 点击下载

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

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

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

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

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

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

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