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" 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">×</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框架的后台管理系统(附源码)
🧡🧡🧡🧡🤍【博主推荐】SpringBoot API接口对数据库增删改查,路由,TOKEN,WebSocket完整版(附源码)
🧡🧡🧡🧡🤍【博主推荐】HTML制作一个美观的个人简介网页(附源码)
🧡🧡🧡🧡🤍【博主推荐】html好看的个人简历网页版(附源码)
🧡🧡🧡🧡🤍【博主推荐】html好看的个人主页(附源码)
🧡🧡🧡🧡🤍【博主推荐】html好看的邀请函(附源码)
🧡🧡🧡🧡🤍【博主推荐】html好看的音乐播放器(附源码)
🧡🧡🧡🧡🤍【博主推荐】html好看的拼图小游戏(附源码)
🧡🧡🧡🤍🤍【博主推荐】html好看的拼图验证码(附源码)
🧡🧡🧡🧡🧡【博主推荐】html界面绘制SVG图形(附源码)
🧡🧡🧡🧡🤍【博主推荐】html操作SVG图(附源码)
🧡🧡🧡🧡🤍【博主推荐】html下拉框树形(附好看的登录界面)
🧡🧡🧡🧡🤍【博主推荐】HTML5响应式手机WEB(附源码)
🧡🧡🧡🧡🤍【博主推荐】大数据可视化大屏(源码下载)
🧡🧡🧡🧡🧡【博主推荐】html引用百度地图定位闪烁弹框树形(附源码)
🧡🧡🧡🧡🤍【博主推荐】HTML酷炫动画表白求爱界面(附源码)
💞 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
🎀 酷炫邀请函 带你体验高大上得邀请
亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请留言(评论),博主看见后一定及时给您答复,💌💌💌
更多推荐
【博主推荐】html好看的年会抽奖(附源码)
发布评论