HTML5新婚、年会、各种聚会的现场抽奖活动（附源码）

news2024/12/28 6:43:41

文章目录

  • 1.抽奖平台设计来源
    • 1.1 主界面效果
    • 1.2 抽奖效果
    • 1.3 中奖效果
  • 2.效果和源码配置
    • 2.1 动态效果
    • 2.2 人员信息配置
    • 2.3 奖品信息配置
    • 2.4 抽奖音效配置
    • 2.5 源代码
  • 源码下载

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

HTML5新婚、年会、各种聚会的现场抽奖活动（附源码） ，酷炫的抽奖平台，动态的效果，支持名单配置输入，奖项配置输入，中奖人数配置设定，每次抽取人数配置设定，适用于各种公司晚会，朋友聚会，公司年会，婚礼现场活动，平台线上抽奖，争对各种场合，更换文字和特定效果即可。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。附：支持扩展，如有问题请联系我。

1.抽奖平台设计来源

1.1 主界面效果

    抽奖主界面，上边分为左中右，上边的左边和右边是男女双方誓言，上边的中间是参加抽奖名单；中间是本次活动名称，下边是奖项信息及相关操作。
    员工信息：上来展示的16个随机抽取的抽奖人员名单，目前总共60个人员信息。（可以根据自己的人员来配置名称和序号）
    奖项和人数信息：目前设置的三个奖项，幸福奖1人，表演节目3人，喝酒三杯十人，这个可以根据自己的需求配置。（也可以配置，一等奖、二等奖、三等奖）

在这里插入图片描述

1.2 抽奖效果

    抽奖效果，点击开始，抽奖人员名字开始滚动，点击结束，抽出中奖人员，可在代码里面配置一次抽取多少人。抽奖效果是动态的文字切换和背景抽奖音效，图片体现不出来效果，具体效果见下面的视频演示。

在这里插入图片描述

抽奖页面

在这里插入图片描述

点击开始抽奖页面

1.3 中奖效果

中奖效果界面，上边分为左中右，上边的左边和右边是男女双方誓言，上边的中间是中奖人员名单；中间是本次活动名称，下边是奖项信息及相关操作。
在这里插入图片描述

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+='{"staff_name":"刘嘉玲","staff_no":"0000031"},';
userInfo+='{"staff_name":"高圆圆","staff_no":"0000032"},';
userInfo+='{"staff_name":"陈紫涵","staff_no":"0000033"},';
userInfo+='{"staff_name":"梅艳芳","staff_no":"0000034"},';
userInfo+='{"staff_name":"蔡依林","staff_no":"0000035"},';
userInfo+='{"staff_name":"陈晓旭","staff_no":"0000036"},';
userInfo+='{"staff_name":"陈美琪","staff_no":"0000037"},';
userInfo+='{"staff_name":"程瑷瑗","staff_no":"0000038"},';
userInfo+='{"staff_name":"杜若溪","staff_no":"0000039"},';
userInfo+='{"staff_name":"范冰冰","staff_no":"0000040"},';
userInfo+='{"staff_name":"范文芳","staff_no":"0000041"},';
userInfo+='{"staff_name":"付梦妮","staff_no":"0000042"},';
userInfo+='{"staff_name":"刘雨欣","staff_no":"0000043"},';
userInfo+='{"staff_name":"何琢言","staff_no":"0000044"},';
userInfo+='{"staff_name":"陈乔恩","staff_no":"0000045"},';
userInfo+='{"staff_name":"蔡少芬","staff_no":"0000046"},';
userInfo+='{"staff_name":"陈钰琪","staff_no":"0000047"},';
userInfo+='{"staff_name":"邓家佳","staff_no":"0000048"},';
userInfo+='{"staff_name":"何泓珊","staff_no":"0000049"},';
userInfo+='{"staff_name":"黄圣依","staff_no":"0000050"},';
userInfo+='{"staff_name":"盖丽丽","staff_no":"0000051"},';
userInfo+='{"staff_name":"李亚男","staff_no":"0000052"},';
userInfo+='{"staff_name":"梁静茹","staff_no":"0000053"},';
userInfo+='{"staff_name":"李小璐","staff_no":"0000054"},';
userInfo+='{"staff_name":"郭雪芙","staff_no":"0000055"},';
userInfo+='{"staff_name":"李冰冰","staff_no":"0000056"},';
userInfo+='{"staff_name":"郭珍霓","staff_no":"0000057"},';
userInfo+='{"staff_name":"罗震环","staff_no":"0000058"},';
userInfo+='{"staff_name":"江疏影","staff_no":"0000059"},';
userInfo+='{"staff_name":"蒋依依","staff_no":"0000060"}';
userInfo+="]";

2.3 奖品信息配置

奖品信息可以灵活配置，showPrize传类型(人数)即可

<div id="prizeDiv" class="rightDivson">
	<div class="btnDiv" onclick="showPrize(1);">幸福奖(1人)</div>
	<div class="btnDiv" onclick="showPrize(2);">表演节目(3人)</div>
	<div class="btnDiv" onclick="showPrize(3);">喝酒三杯(10人)</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()">丰兰息❤白风夕 婚礼抽奖活动</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人)</div>
			<div class="btnDiv" onclick="showPrize(1);">表演节目(3人)</div>
			<div class="btnDiv" onclick="showPrize(3);">喝酒三杯(10人)</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>

源码下载

HTML5新婚、年会、各种聚会的现场抽奖活动（源码） 点击下载
在这里插入图片描述

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

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

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

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1465272.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第一节-docker介绍

第一节-docker介绍

这里写自定义目录标题 一、什么是docker二、docker和virtual machine三、docker架构 一、什么是docker docker是一种容器引擎&#xff0c;用于构建、部署、运行应用程序和服务。 docker的每个容器通过沙箱机制相互隔离&#xff0c;互不干扰。 docker容器技术相比传统的虚拟机有…
阅读更多...
六、回归与聚类算法 - 模型保存与加载

六、回归与聚类算法 - 模型保存与加载

目录 1、API 2、案例 欠拟合与过拟合线性回归的改进 - 岭回归分类算法&#xff1a;逻辑回归模型保存与加载无监督学习&#xff1a;K-means算法 1、API 2、案例
阅读更多...
费舍尔FISHER金属探测器探测仪维修F70

费舍尔FISHER金属探测器探测仪维修F70

美国FISHER LABS费舍尔地下金属探测器&#xff0c;金属探测仪等维修&#xff08;考古探金银铜探宝等仪器&#xff09;。 费舍尔F70视听目标ID金属探测器&#xff0c;Fisher 金属探测器公司成立于1931年&#xff0c;在实验条件很艰苦的情况下&#xff0c;研发出了地下金属探测器…
阅读更多...
昨天Google发布了最新的开源模型Gemma，今天我来体验一下

昨天Google发布了最新的开源模型Gemma，今天我来体验一下

前言 看看以前写的文章&#xff0c;业余搞人工智能还是很早之前的事情了&#xff0c;之前为了高工资&#xff0c;一直想从事人工智能相关的工作都没有实现。现在终于可以安静地系统地学习一下了。也是一边学习一边写博客记录吧。 昨天Google发布了最新的开源模型Gemma&#xf…
阅读更多...
常见锁策略,CAS,synchrodized原理讲解

常见锁策略,CAS,synchrodized原理讲解

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 常见锁策略 乐观锁和悲观锁 轻量级锁和重量级锁 自旋锁和挂起等待锁 读写锁 公平锁和非公平锁…
阅读更多...
【ctfshow—web】——信息搜集篇1（web1~20详解）

【ctfshow—web】——信息搜集篇1（web1~20详解）

ctfshow—web题解 web1web2web3web4web5web6web7web8web9web10web11web12web13web14web15web16web17web18web19web20 web1 题目提示 开发注释未及时删除 那就找开发注释咯&#xff0c;可以用F12来查看&#xff0c;也可以CtrlU直接查看源代码呢 就拿到flag了 web2 题目提示 j…
阅读更多...
【数据结构】顺序表实现的层层分析！！

【数据结构】顺序表实现的层层分析！！

关注小庄 顿顿解馋◍˃ ᗜ ˂◍ 引言&#xff1a;本篇博客我们来认识数据结构其中之一的顺序表&#xff0c;我们将认识到什么是顺序表以及顺序表的实现&#xff0c;请放心食用~ 文章目录 一.什么是顺序表&#x1f3e0; 线性表&#x1f3e0; 顺序表 二.顺序表的实现&#x1f3e0…
阅读更多...
ShardingSphere 5.x 系列【14】广播表、单表

ShardingSphere 5.x 系列【14】广播表、单表

有道无术，术尚可求，有术无道，止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址：https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1.广播表1.1 概述1.2 案例演示1.2.1 环境准备1.2.2 配置1.2.3 测试2. 单表2.…
阅读更多...
2024年.NET框架发展趋势预测

2024年.NET框架发展趋势预测

.NET框架仍然是全球开发人员的编程基石&#xff0c;为构建广泛的应用程序提供了一个通用的、强大的环境。微软对创新的坚定承诺见证了.NET的发展&#xff0c;以满足技术领域不断变化的需求。今年&#xff0c;在更广泛的行业运动、技术进步和开发者社区反馈的推动下&#xff0c;…
阅读更多...
记一次：Python的学习笔记五（Django集成swagger）

记一次：Python的学习笔记五（Django集成swagger）

上一篇集成在了gatway上了&#xff0c;但给别人使用swagger的时候还是没有文档&#xff0c;如何集成swagger呢&#xff1f; python版本&#xff1a;Python 3.11.5 Django版本&#xff1a;4.2.7 0、Swagger 文档介绍 Swagger 是一种用于 RESTful API 的开源框架&#xff0c;…
阅读更多...
2种方法，教你使用Python实现接口自动化中的参数关联

2种方法，教你使用Python实现接口自动化中的参数关联

通常在接口自动化中&#xff0c;经常会参数关联的问题&#xff0c;那么什么是参数关联&#xff1f; 参数关联就是上一个接口的返回值会被下一个接口当做参数运用&#xff0c;其中Python中可以实现参数关联的方法有很多种&#xff0c;今天小编给大家介绍下&#xff0c;如何通过…
阅读更多...
SQL Server ID 自增不连续、删除数据后再次插入ID不连续

SQL Server ID 自增不连续、删除数据后再次插入ID不连续

背景 当我们使用SQL Server 进行数据库操作时&#xff0c;经常会把 Table 的 ID 设置成主键自增 PRIMARY KEY IDENTITY&#xff0c;但是这样做存在一个问题就是 当我们删除一行数据后&#xff0c;再次添加后会看到ID的顺序不连续&#xff0c;如下所示。 查询一下&#xff1a;…
阅读更多...
冲突管理最佳实践

冲突管理最佳实践

任何团队都无法避免冲突&#xff0c;如何有效管理冲突&#xff0c;将冲突转化为团队成长和凝聚的动力&#xff0c;是任何一个团队管理者的必修课。原文: Best Practices for Managing Conflict in Engineering Management Obie Fernandez Unsplash 冲突在任何组织中都不可避免&…
阅读更多...
排序第三篇 直接插入排序

排序第三篇 直接插入排序

插入排序的基本思想是&#xff1a; 每次将一个待排序的记录按其关键字的大小插入到前面已排好序的文件中的适当位置&#xff0c; 直到全部记录插入完为止。 一 简介 插入排序可分为2类 本文介绍 直接插入排序 它的基本操作是&#xff1a; 假设待排充序的记录存储在数组 R[1……
阅读更多...
【鸿蒙 HarmonyOS 4.0】状态管理

【鸿蒙 HarmonyOS 4.0】状态管理

一、介绍 资料来自官网&#xff1a;文档中心 在声明式UI编程框架中&#xff0c;UI是程序状态的运行结果&#xff0c;用户构建了一个UI模型&#xff0c;其中应用的运行时的状态是参数。当参数改变时&#xff0c;UI作为返回结果&#xff0c;也将进行对应的改变。这些运行时的状…
阅读更多...
【Linux】普通用户sudo失败怎么办

【Linux】普通用户sudo失败怎么办

普通用户&#xff0c;sudo失败报错怎么办 问题分析如何解决成功 问题分析 新建的普通用户sudo失败 sudo提权&#xff0c;是以root的身份执行命令。 当我们用sudo提升权限的时候&#xff0c;这里有个问题&#xff0c;Linux会提示我们输入当前普通用户的密码——这就有点不好。…
阅读更多...
骨传导耳机哪个品牌比较好？精选五大倍受好评的机型推荐！

骨传导耳机哪个品牌比较好？精选五大倍受好评的机型推荐！

近几年大家对保护听力健康的意识也越来越强烈了&#xff0c;骨传导耳机作为保护听力健康的不二之选&#xff0c;使用的人也越来越多&#xff0c;但是&#xff0c;在面对市场上鱼龙混杂的产品时&#xff0c;还是有很多人不知道该怎么去挑选一款性能优秀的骨传导耳机&#xff0c;…
阅读更多...
[TCP] TCP/IP 基础知识词典（2）

[TCP] TCP/IP 基础知识词典（2）

我想统计一下&#xff0c;TCP/IP 尤其是TCP协议&#xff0c;能搜到的常见的问题&#xff0c;整理起来&#xff0c;关键词添加在目录中&#xff0c;便于以后查阅。 目前预计整理共3篇&#xff1a; [TCP] TCP/IP 基础知识问答 &#xff1a;基础知识 [TCP] TCP/IP 基础知识问答&…
阅读更多...
硬盘坏了数据恢复怎么做？记好这2个方法！

硬盘坏了数据恢复怎么做？记好这2个方法！

“前段时间我的电脑硬盘出了点问题&#xff0c;不知道为什么就坏了。硬盘坏了数据恢复应该怎么做呢&#xff1f;请大家分享几个好用的方法吧&#xff01;” 在数字化时代&#xff0c;硬盘作为数据存储的核心组件&#xff0c;其重要性不言而喻。然而&#xff0c;硬盘损坏是一个常…
阅读更多...
【知识分享】自动化测试首选接口自动化？

【知识分享】自动化测试首选接口自动化？

在分层测试的“金字塔”模型中&#xff0c;接口测试属于第二层服务集成测试范畴。 相比UI自动化测试而言&#xff0c;接口自动化测试收益更大&#xff0c;且容易实现&#xff0c;维护成本低&#xff0c;有着更高的投入产出比。因此&#xff0c;项目开展自动化测试的首选一般为接…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023