html实现酷炫的公司年会抽奖(附源码)
文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 抽奖效果
- 1.2 中奖效果
- 2.效果和源码配置
- 2.1 动态效果
- 2.2 员工信息配置
- 2.3 奖品信息配置
- 2.4 抽奖音效配置
- 2.5 源代码
- 源码下载
作者: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实现酷炫的公司年会抽奖(源码) 点击下载
html实现酷炫的公司年会抽奖(附源码)相关推荐
- html实现名字滚动年会抽奖(附源码)
文章目录 1.html实现年会抽奖设计思路 1.1 抽奖主界面 1.2 特等奖抽奖界面 1.2 单个抽奖中奖界面 1.3 一次全抽,中奖界面 2.动态效果及代码 2.1 抽奖界面动态效果展示 2.2 ...
- html表格美化源码,非常酷炫的CSS3表格设计样式源码
资源演示 一组非常酷炫的CSS3表格设计样式源码,推荐用来做设计参考. CSS参考代码 /* Table 1 Style */ table.table1{ font-family: "Tre ...
- java计算机毕业设计建材公司管理系统(附源码、数据库)
java计算机毕业设计建材公司管理系统(附源码.数据库) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe( ...
- 10款炫酷的HTML5动画特效,附源码
HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时,这些效果也非常消耗电脑的CPU,但是这些HTML5效果确实能给用户带来不一样的用户体验. 今天我要跟大家分享一些HT ...
- 10款超炫html5游戏,10款炫酷的HTML5动画特效,附源码
HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时,这些效果也非常消耗电脑的CPU,但是这些HTML5效果确实能给用户带来不一样的用户体验. 今天我要跟大家分享一些HT ...
- 天天酷跑php源码_Java实现天天酷跑小游戏完整代码(附源码)
首先,写一个需求文档: 一.项目名称:<天天酷跑>(RunDay) 二.功能介绍: 闯关类游戏,玩家登录后,选择进入游戏,通过键盘控制玩家的上下左右移动,来躲避 障碍物和吃金币,玩家躲避的 ...
- 用Three.js打造酷炫3D个人网站(含源码)
引言 个人网站是程序员的第二张简历.如果你有酷炫的个人网页,面试官对你的好感度会蹭蹭蹭往上涨. 在疫情隔离期间,我用Three.js和Ammo.js制作了一个可交互的3D个人网页. 在线预览地址: w ...
- 天天酷跑电脑版代码C语言,Java实现天天酷跑小游戏完整代码(附源码).pdf
Java实实现现天天天天酷酷跑跑小小游游戏戏完完整整代代码码(附附源源码码) 首首先先,,写写一一个个需需求求文文档档:: 一.项目名称: <天天酷跑> (RunDay ) 二.功能介绍: ...
- html5公司年终抽奖程序源码按数字随机抽奖
下载地址 按键盘空格键或者字母A可进行抽取,隐藏菜单请按ESC.ESC菜单中高级设置可以设置参与人数,格子大小,重置抽奖数据等信息.点击已经中奖格子并输入点击的格子编号可取消该格子中奖状态,并清除中奖 ...
最新文章
- 工作中的感悟 (一)初来工作之感
- 解决Mysql无法导入存在null数据的问题
- python 深拷贝_详解python的复制,深拷贝和浅拷贝的区别
- mac设置首页访问php,mac系统下php项目除了首页全访问不了
- The FreeRTOS Distribution(介绍、移植、类型定义)
- 设计师妹子问:字体颜色渐变,你能实现?
- 如何让HTML在手机上实现直接拨打电话以及发送短信?
- 解决 Tomcat禁用OPTIONS协议(不安全的HTTP方法)
- 日期判断是今天/明天/后天
- java飞机大战boss素材_java小游戏飞机大战 源代码以及素材
- php 调用拼多多接口方法 生成 sign方法
- 鲁大师最新笔记本排行榜,微星 Raider GE76性能最强
- php 自动生成考卷下载,试卷生成器下载-试卷生成器电脑版下载[试题生成]-华军软件园...
- win7笔记本电脑设置WiFi热点
- DOS定时关机命令 windowXp
- 隔壁老王和老宋的战争
- 设置wsl2桥接模式和设置ip
- 到底什么样的网站才需要办理ICP许可证?
- win10禁止计算机进入休眠,Win10怎么关闭系统休眠 Win10关闭系统休眠方法
- 常见协议及对应的因特网协议栈
热门文章
- 小学计算机功能室活动总结,明德小学电教室工作总结
- 关注5月28日下弦月相和29日月亮赤纬角最小值 [预测地震]
- 0-1岁新生宝宝成长及发育进程
- 自动化测试工具,UI测试与压力测试
- 3|物联网控制|计算机控制-刘川来胡乃平版|第4章:过程通道与人机接口-4.2模拟量输出通道4.3 模拟量输入通道|课堂笔记|ppt
- 微型计算机化的数据采集系统,微型计算机数据采集系统-read.ppt
- 【C语言初阶】带你轻松玩转所有常用操作符(1) ——算数操作符,移位操作符,位操作符
- RestEasy 调用Rest接口使用详解
- 惊曝6.24AppCan移动开发大会参展名录,现场礼品超多!
- Jenkins 完全系列视频教程制作组招募