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

xcLeigh

已于 2022-11-08 13:23:01 修改

阅读量4.2k

点赞数 3

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

于 2021-01-26 16:11:38 首次发布

BY xcSharp@126.com

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

版权

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

137 篇文章 109 订阅

订阅专栏

资源源码

122 篇文章 93 订阅

订阅专栏

文章目录

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实现好看的年会抽奖(源码）点击下载

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

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

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

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

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

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

原文地址：https://blog.csdn.net/weixin_43151418/article/details/113182706（防止抄袭，原文地址不可删除）