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

文章目录

  • 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.mzph.cn/news/697950.shtml

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

相关文章

最长公共前缀【简单】

最长公共前缀【简单】

题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 示例如下&#xff1a; 所给提示如下&#xff1a; 1 < strs.length < 2000 < strs[i].length < 200strs[i] 仅由小写英文字母组成 解题 根据…
阅读更多...
使用 C++23 协程实现第一个 co_await 同步风格调用接口--Qt计算文件哈希值

使用 C++23 协程实现第一个 co_await 同步风格调用接口--Qt计算文件哈希值

C加入了协程 coroutine的特性&#xff0c;一直没有动手实现过。看了网上很多文章&#xff0c;已经了解了协程作为“可被中断和恢复的函数”的一系列特点。在学习过程中&#xff0c;我发现大多数网上的例子&#xff0c;要不就是在main()函数的控制台程序里演示yeild,await, resu…
阅读更多...
【动态规划专栏】背包问题：01背包

【动态规划专栏】背包问题：01背包

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…
阅读更多...
个人博客系列-前端部署-创建框架（4）

个人博客系列-前端部署-创建框架（4）

项目环境介绍 Vue3 Vite TypeScript 服务器&#xff1a;阿里云contos node版本&#xff1a;v18.18.2 npm版本&#xff1a;v10.2.4 执行下面一行命令&#xff0c;创建vue3框架 npm create vuelatest修改端口&#xff1a;9528&#xff0c; 此步骤可以忽略&#xff08;使用默…
阅读更多...
Chrome Captcha自动解决器，如何下载CapSolver

Chrome Captcha自动解决器，如何下载CapSolver

在数字时代&#xff0c;CAPTCHA&#xff08;Completely Automated Public Turing tests to tell Computers and Humans Apart&#xff0c;完全自动区分计算机和人类的公共图灵测试&#xff09;作为一项重要的安全措施&#xff0c;用于保护网站免受自动机器人的攻击。然而&#…
阅读更多...
一款跳转警告HTML单页模板源码

一款跳转警告HTML单页模板源码

一款跳转警告HTML单页模板,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 代码如下 <!DOCTYPE html> <html> <!--QQ沐编程 www.q…
阅读更多...
5个精美的wordpress中文企业主题模板

5个精美的wordpress中文企业主题模板

元宇宙WordPress主题模板 简洁大气的元宇宙 Metaverse WordPress主题模板&#xff0c;适合元宇宙行业的企业官网使用。 https://www.jianzhanpress.com/?p3292 职业技术培训WordPress主题模板 简洁大气的职业技术培训WordPress主题&#xff0c;适合用于搭建教育培训公司官方…
阅读更多...
【SpringCloudAlibaba系列--OpenFeign组件】OpenFeign的配置、使用与测试以及OpenFeign的负载均衡

【SpringCloudAlibaba系列--OpenFeign组件】OpenFeign的配置、使用与测试以及OpenFeign的负载均衡

步骤一 准备两个服务&#xff0c;provider和consumer 本文使用kotlin语言 provider是服务的提供者&#xff0c;由provider连接数据库 RestController RequiredArgsConstructor RequestMapping("/provider/depart") class DepartController(private val departServ…
阅读更多...
磨砂玻璃(毛玻璃)风格的登录页，怎么就流行起来了呢？

磨砂玻璃(毛玻璃)风格的登录页，怎么就流行起来了呢？

拟物风格之后是扁平风格&#xff0c;扁平风格之后是拟态风格&#xff0c;而毛玻璃风格是拟态风格的一种表现形式&#xff0c;如今非常流行了&#xff0c;背后的原因是什么&#xff1f;贝格前端工场为大家详细分析下。 UI风格先后经历了拟物、扁平和拟态三大类&#xff0c;分别…
阅读更多...
掼蛋之还贡技巧

掼蛋之还贡技巧

掼蛋游戏的规则之一就是进贡和还贡以及抗贡&#xff0c;只要末游没能抗贡&#xff0c;那么就必须把最大的那张牌贡给头游&#xff0c;头游也要选一张牌还给末游。那么我们该如何还贡呢&#xff1f; 一、忌单张 尽量不要还自己的单张&#xff0c;因为自己的数量少&#xff0c;有…
阅读更多...
RabbitMQ开启MQTT协议支持

RabbitMQ开启MQTT协议支持

1&#xff09;RabbitMQ启用MQTT插件 rootmq:/# rabbitmq-plugins enable rabbitmq_mqtt Enabling plugins on node rabbitmq: rabbitmq_mqtt The following plugins have been configured:rabbitmq_managementrabbitmq_management_agentrabbitmq_mqttrabbitmq_web_dispatch Ap…
阅读更多...
从入门到精通：Spring Boot Alibaba学习网站助你构建高效微服务

从入门到精通：Spring Boot Alibaba学习网站助你构建高效微服务

介绍&#xff1a;Spring Boot Alibaba是一个基于Spring Boot的微服务开发框架&#xff0c;由阿里巴巴开源&#xff0c;旨在为分布式应用开发提供一站式解决方案。 Spring Boot Alibaba集成了阿里巴巴的微服务实践经验和组件&#xff0c;它是在Spring Cloud项目中孵化的&#xf…
阅读更多...
解决Jenkins-2.396启动报错：Failed to start Jenkins Continuous Integration Server.

解决Jenkins-2.396启动报错：Failed to start Jenkins Continuous Integration Server.

场景&#xff1a;现有环境已经使用Java 8在运行业务&#xff0c;安装Jenkins后启动报错。 原因&#xff1a;因为Jenkins-2.396 依赖于Java 11 版本才能启动。 解决方法&#xff1a; yum 安装Java11 yum install java-11-openjdk-devel java-11-openjdk 或者二进制安装java11修…
阅读更多...
基于生成扩散模型的分子对接程序-DiffDock安装及使用

基于生成扩散模型的分子对接程序-DiffDock安装及使用

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、DiffDock是什么&#xff1f;二、DiffDock安装步骤1. 下载2.创建conda环境并安装STEP 1. 创建conda环境并配置STEP 2. 配置ESM和OpenFoldSTEP 3. 检查cuda和pytorch geometric安装STEP 4. 检查p…
阅读更多...
【RHCE】SHELL for循环练习

【RHCE】SHELL for循环练习

目录 1.编写脚本for1.sh,使用for循环创建20账户&#xff0c;账户名前缀由用户从键盘输入&#xff0c;账户初始密码由用户输入&#xff0c;例如:test1、test2、test3、……、test10 2.编写脚本for2.sh,使用for循环,通过ping命令测试网段的主机连通性&#xff0c;IP前3段由用户…
阅读更多...
江科大stm32学习笔记——【3-2】GPIO输出：LED闪烁LED流水灯蜂鸣器

江科大stm32学习笔记——【3-2】GPIO输出：LED闪烁LED流水灯蜂鸣器

&#xff08;一&#xff09; 硬件连接 1.LED闪烁 LED灯正极连接面包板电源正极&#xff0c;LED负极连接单片机A0口 (也可以LED负极连面包板负极&#xff0c;LED正极连接单片机A0口) 跳线连接单片机3.3和面包板正极&#xff0c;连接单片机GND和面包板负极 2.LED流水灯 3.蜂鸣…
阅读更多...
在UE5中制作UI环形进度条

在UE5中制作UI环形进度条

在日常开发中&#xff0c;经常会有环形进度条UI的效果&#xff0c;例如技能CD时间、加载动画等&#xff0c;本文将通过材质球节点实现该效果&#xff0c;相较于准备美术素材&#xff0c;这样的做法更为方便&#xff0c;效果如下&#xff1a; 1.制作环状效果材质函数 在内容面…
阅读更多...
【云动世纪：Apache Doris 技术之光】

【云动世纪：Apache Doris 技术之光】

本文节选自《基础软件之路&#xff1a;企业级实践及开源之路》一书&#xff0c;该书集结了中国几乎所有主流基础软件企业的实践案例&#xff0c;由 28 位知名专家共同编写&#xff0c;系统剖析了基础软件发展趋势、四大基础软件&#xff08;数据库、操作系统、编程语言与中间件…
阅读更多...
maven插件wagon-ssh、os-maven-plugin、buildnumber-maven-plugin使用详解

maven插件wagon-ssh、os-maven-plugin、buildnumber-maven-plugin使用详解

文章目录 前言一、os-maven-plugin的使用二、buildnumber-maven-plugin使用1、时间戳策略2、数字策略 三、wagon-ssh使用1、上传文件/文件夹2、执行Linux命令或者shell脚本 总结 前言 有时我们在构建项目时&#xff0c;希望能自动生成版本号或者生成不同操作系统标识的版本后缀…
阅读更多...
RS®FSVA3000 信号与频谱分析仪

RS®FSVA3000 信号与频谱分析仪

R&SFSVA3000 信号与频谱分析仪 非常适用于实验室以及生产过程中的高要求信号分析任务。R&SFSVA3000 信号与频谱分析仪的分析带宽高达 1 GHz&#xff0c;并具有低至 –120 dBc/Hz 的相位噪声和高动态范围&#xff0c;适用于要求严格的 5G NR 测量应用。分析仪测量速度快…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023