【博主推荐】html好看的年会抽奖(附源码)

置顶 xcLeigh

已于 2022-08-19 23:07:15 修改

阅读量5.5k

点赞数 7

分类专栏：资源源码 HTML5实战案例文章标签： html css js 抽奖

于 2022-05-31 16:47:16 首次发布

BY xcSharp@126.com

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

版权

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

113 篇文章 102 订阅

订阅专栏

资源源码

98 篇文章 91 订阅

订阅专栏

html好看的年会抽奖

年会抽奖介绍
优质资源分享

年会抽奖介绍

html好看的年会抽奖，数据信息JSON格式，支持配置用户信息，也可以Ajax动态加载自己数据的API，有抽奖，暂停功能、支持背景音乐，主题选择，效果震撼。
html5 + js + css

1.界面效果

主界面
抽奖效果

2.抽奖界面代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xcLeigh</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
    <script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./js/transform.js"></script>
	<script type="text/javascript" src="./js/tick.js"></script>
	<script type="text/javascript" src="./js/3d.js"></script>
	<script type="text/javascript" src="./js/lucky.js"></script>
	<script type="text/javascript" src="./js/data.js"></script>
	<script type="text/javascript" src="./js/raffle.js"></script>
</head>
<body>
	<div>
		<audio id="audioMusic" src="img/bgmusic.mp3" controls style="display:none;"></audio>
		<div class="row action-outer">
			<div class="col-md-4 btns hidden-actions">
				<div class="btn-group">
					<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="theme">
						主题 <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li><a href="#" onclick="changeBackground('orange')">主题一</a></li>
						<li><a href="#" onclick="changeBackground('#7EC8EC')">主题二</a></li>
						<li><a href="#" onclick="changeBackground('black')">主题三</a></li>
					</ul>
				</div>
				<!--<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#addPerson" style="outline: none">添加人员</button>-->
			</div>
		</div>
		<div class="row box">
			<div class="col-md-4" >
				<div class="lucky_list">
					<div class="lucky_people_list">
						<div class="lucky_people_title">中奖名单</div>
						<div class="lpl_list active" style="display: block;"></div>
					</div>
				</div>
			</div>
			<div class="col-md-8 show-outer">
				<div class="mask" style="display: none;"></div>
				<div class="btn_outer" id="open">
					<div  class="btn_circle">开始</div>
				</div>
				<div class="btn_outer btn_stop"id="stop" style="display: none">
					<div class="btn_circle" >停止</div>
				</div>
				<div class="container"></div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="addPerson">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" style="display: inline-block">增加人员</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<form role="form">
						<div class="form-group">
							<label for="name">姓名：</label>
							<input class="form-control" id="name" placeholder="Enter name">
						</div>
						<div class="form-group">
							<label for="phone">电话：</label>
							<input class="form-control" id="phone" placeholder="Enter phone">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="addPersonToArr()">增加</button>-->
				</div>
			</div>
		</div>
	</div>
</body>
</html>

3.员工数据格式

var nameList = [
    "丰息",
    "风夕",
    "雍王",
    "栖梧",
    "皇朝",
    "瀛洲",
    "丰莒",
    "丰苌",
    "纯然",
    "钟离",
    "无缘",
    "惜云",
];

4.源码下载

【博主推荐】html好看的年会抽奖(源码) 点击下载

优质资源分享

🧡🧡🧡🧡🤍【总览】程序员前端、后端资源合集

🧡🧡🧡🧡🤍【源码】程序员优质资源汇总

🧡🧡🧡🧡🤍【博主推荐】JAVA SSM框架的后台管理系统（附源码）

🧡🧡🧡🧡🤍【博主推荐】HTML制作一个美观的个人简介网页（附源码）

🧡🧡🧡🧡🤍【博主推荐】html好看的个人简历网页版(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的个人主页(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的邀请函(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的音乐播放器(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的拼图小游戏(附源码)

🧡🧡🧡🤍🤍【博主推荐】html好看的拼图验证码(附源码)

🧡🧡🧡🧡🧡【博主推荐】html界面绘制SVG图形(附源码)

🧡🧡🧡🧡🤍【博主推荐】html操作SVG图(附源码)

🧡🧡🧡🧡🤍【博主推荐】html下拉框树形（附好看的登录界面）

🧡🧡🧡🧡🤍【博主推荐】HTML5响应式手机WEB(附源码)

🧡🧡🧡🧡🤍【博主推荐】大数据可视化大屏(源码下载)

🧡🧡🧡🧡🧡【博主推荐】html引用百度地图定位闪烁弹框树形(附源码)

🧡🧡🧡🧡🤍【博主推荐】HTML酷炫动画表白求爱界面(附源码)

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

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

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

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

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

xcLeigh

关注

7
点赞
踩
36

收藏

觉得还不错? 一键收藏
打赏
6
评论
【博主推荐】html好看的年会抽奖(附源码)

html年会抽奖源码，html抽奖源码，html抽奖源码，年会抽奖源码,酷炫年会抽奖源码。
复制链接

扫一扫

专栏目录