文章目录

1.年会抽奖效果
- 1.1 抽奖界面
- 1.2 中奖名单界面
2.年会抽奖动态效果和源码
- 2.1 动态效果
- 2.2 主代码
源码下载

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

**html实现好看的年会抽奖**html实现好看年会抽奖，分为特等奖，一等奖，二等奖，三等奖，随机抽取用户，使用本地缓存，酷炫抽奖动画，展示用户中奖信息。

1.年会抽奖效果

1.1 抽奖界面

奖项分为，特等奖（3人），一等奖（5人），二等奖（15人），三等奖（15人），每个奖项有独立的奖品展示，背景有抽奖音乐，如果已抽奖，会显示抽奖的用户信息，如果没有抽奖，界面会有抽奖按钮，点击抽奖开始酷炫抽奖。

1.2 中奖名单界面

根据奖项的中奖数，显示中奖人员名单，缓存到本地的。

2.年会抽奖动态效果和源码

2.1 动态效果

可以在这个基础上配置自己的奖项，自己喜欢的背景音乐。

html实现好看年会抽奖(源码)

2.2 主代码

这个是抽奖界面的html，其他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>xcLeigh - 年会抽奖</title><link href="css/default.css" rel="stylesheet" type="text/css" /><!--必要样式--><link href="css/styles.css" rel="stylesheet" type="text/css" /><link href="css/demo.css" rel="stylesheet" type="text/css" /><link href="css/loaders.css" rel="stylesheet" type="text/css" />
</head>
<body onload="getPriceInfo();" ο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;" ><canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas><audio src="img/lucky.mp3" preload="" id="bg-music"></audio> <div class='login'> <!-- width: 440px; height: 500px; --><div class="jq22" style="position: absolute;width:100%;height: 100%;z-index: 99999px;"></div><div class="divTitle"><a href="#" onclick="showjx(4);" style="color:burlywood;font-weight: bold;">特等奖</a>&nbsp;<a href="#" onclick="showjx(1);" style="color: red;font-weight: bold;">一等奖</a>&nbsp;<a href="#" onclick="showjx(2);" style="color: red;font-weight: bold;">二等奖</a>&nbsp;<a href="#" onclick="showjx(3);" style="color: blue;font-weight: bold;">三等奖</a>&nbsp;<div></div><div style="text-align: center;padding: 10px;padding-top:20px;font-size: 28px; font-family: 'Courier New', Courier, monospace;"><b id="jxname">特等奖-3名</b><br/><span id="jxdetail">海南三亚自选线路6天5晚（含机票、酒店、门票）</span></div></div><hr style="margin: 0px;padding:0px;" /><div style="height: 350px; text-align: center;padding-top: 20px;"><div id="pricediv" class="pricediv" style="display: none;"><ul id="myul"><!-- <li>刘亦菲</li><li>Alice Yu-Lin Hu</li><li>YIP KWOK LUN ADRIAN</li> --></ul><div style="clear: both;"></div><ul id="myul2"></ul></div><div id="lwdiv" style="display: none;"><img id="imgdj" src="img/lp_png.png" class="jplw" style="width: 250px;height:240px;padding: 10px;"></div><div id="cjdiv" style="display: none;"><img id="imgdj" src="img/lpjz.gif" class="jplw" style="width: 250px;height:240px;padding: 10px;"></div><div style="padding: 15px;"></div><div id="cjbtn" style="display: none;"><a href="#" onclick="goPrice();" style="color:aliceblue; font-weight: bold;">抽 奖</a>&nbsp;</div></div></div><link href="layui/css/layui.css" rel="stylesheet" type="text/css" /><script src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script><script src="layui/layui.js" type="text/javascript"></script><script src="js/Particleground.js" type="text/javascript"></script><script src="Js/Treatment.js" type="text/javascript"></script><script src="js/jquery.mockjax.js" type="text/javascript"></script><script type="text/javascript" src="js/jquery.fireworks.js"></script>
</body>
</html>

源码下载

html实现好看的年会抽奖(源码）点击下载

html实现好看的年会抽奖(附源码)相关推荐

html实现名字滚动年会抽奖(附源码)
文章目录 1.html实现年会抽奖设计思路 1.1 抽奖主界面 1.2 特等奖抽奖界面 1.2 单个抽奖中奖界面 1.3 一次全抽,中奖界面 2.动态效果及代码 2.1 抽奖界面动态效果展示 2.2 ...
html实现酷炫的公司年会抽奖(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 抽奖效果 1.2 中奖效果 2.效果和源码配置 2.1 动态效果 2.2 员工信息配置 2.3 奖品信息配置 2.4 抽奖音效配置 2.5 源代码源码 ...
html实现好看的导航主页(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 底部导航 1.3 屏幕保护 2.效果和源码 2.1 动态效果 2.2 源代码源码下载作者:xcLeigh 文章地址:https://blog.csd ...
html制作好看的个人简历(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 基本资料页面 1.3 个人名言页面 1.4 教育经历页面 1.5 联系方式页面 1.6 自我评价页面 1.7 工作经历页面 1.8 兴趣爱好页面 1.9 ...
[项目]配合JQuery简洁好看的倒计时页面(附源码)
html实现好看的个人介绍，个人主页模板5(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的介绍界面 1.3 我的能力界面 1.4 项目案例界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.3 源代码目录源码 ...
html多个好看的背景动态效果（附源码）
文章目录 1.设计来源 1.1 图片轮动背景 1.2 星空流星背景 1.3 动态美女背景 1.4 动态屋雨背景 1.5 动态街道背景 1.6 动态夜幕背景 2.效果和源码 2.1 动态效果 2.2 透 ...
html实现酷炫好看的个人介绍主页(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的简介界面 1.3 教育经历界面 1.4 我的源码界面 1.5 我的相册界面 1.6 朋友评价界面 1.7 热门文章界面 1.8 联系我界面 2.效果 ...
html实现好看的个人介绍，个人主页模板3(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 教育成就界面 1.4 项目演示界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.2 源代码目录源码下 ...
html实现好看的个人介绍，个人主页模板1(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 自我介绍界面 1.4 项目演示界面 1.5 个人成就界面 1.6 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码源码 ...

html实现好看的年会抽奖(附源码)