html好看的年会抽奖
- 年会抽奖介绍
- 1.界面效果
- 2.抽奖界面代码
- 3.员工数据格式
- 4.源码下载
- 优质资源分享
年会抽奖介绍
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" ></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">×</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.源码下载
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
