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.rhkb.cn/news/262237.html

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

相关文章

【kubernetes】二进制部署k8s集群之cni网络插件flannel和calico工作原理（中）

【kubernetes】二进制部署k8s集群之cni网络插件flannel和calico工作原理（中）

↑↑↑↑接上一篇继续部署↑↑↑↑ 目录 一、k8s集群的三种接口 二、k8s的三种网络模式 1、pod内容器之间的通信 2、同一个node节点中pod之间通信 3、不同的node节点的pod之间通信 Overlay Network VXLAN 三、flannel网络插件 1、flannel插件模式之UDP模式&#xff0…
阅读更多...
Linux网络编程套接字

Linux网络编程套接字

目录 前言 一、预备知识 1.1 源IP地址和目的IP地址 1.2 区分端口号和进程ID 1.3 TCP协议和UDP协议 1.4 网络字节序 二、socket编程接口 2.1 socket套接字的概念 2.2 socket常见API 2.3 sockaddr结构 三、关于IP和Port的绑定问题 四、编写简单的UDP服务端和客户端 前…
阅读更多...
基于Python网络爬虫的IT招聘就业岗位可视化分析推荐系统（完整系统源码+数据库+详细文档）

基于Python网络爬虫的IT招聘就业岗位可视化分析推荐系统（完整系统源码+数据库+详细文档）

文章目录 基于Python网络爬虫的IT招聘就业岗位可视化分析推荐系统&#xff08;完整系统源码数据库详细文档&#xff09;源码获取在文章末尾项目概述招聘岗位数据爬虫分析系统展示用户注册登录系统首页IT招聘数据开发岗-javaIT招聘数据开发岗-PythonIT招聘数据开发岗-Android算法…
阅读更多...
通过Jmeter压测存储过程

通过Jmeter压测存储过程

一、存储过程准备&#xff1a; 1、建立一个空表&#xff1a; CREATE TABLE test_data ( id NUMBER, name VARCHAR2(50), age NUMBER ); 2、建立一个存储过程&#xff1a; CREATE OR REPLACE PROCEDURE insert_test_data (n IN NUMBER) AS BEGIN--EXECUTE IMMEDIATE truncat…
阅读更多...
如何高效率完成软件开发？试试低代码

如何高效率完成软件开发？试试低代码

一、前言 对于一个非技术出身的软件行业从业者而言&#xff0c;理解技术是一道坎&#xff0c;但也是向上发展所必须跨越的一道坎。在一个软件公司&#xff0c;无论是商务、售前还是项目经理亦或者是产品经理&#xff0c;对技术的理解程度&#xff0c;往往意味着他的专业程度。而…
阅读更多...
开发Chrome插件，background.js中log打印未出现在控制台

开发Chrome插件，background.js中log打印未出现在控制台

不同于内容脚本&#xff08;通常命名content.js&#xff09;&#xff0c;在后台脚本&#xff08;通常命名background.js或service-worker.js&#xff09;中console.log并不会在控制台中直接显示。 要查看后台脚本上下文的正确控制台&#xff0c;执行如下步骤&#xff1a; 访问…
阅读更多...
Facebook Horizon：探索虚拟现实中的社交空间

Facebook Horizon：探索虚拟现实中的社交空间

随着科技的不断进步&#xff0c;虚拟现实&#xff08;VR&#xff09;技术正成为社交互动和娱乐体验的新前沿。在这个数字时代&#xff0c;Facebook作为全球最大的社交媒体平台之一&#xff0c;正在引领虚拟社交的新时代&#xff0c;其推出的虚拟社交平台Facebook Horizon成为了…
阅读更多...
ELF文件内容详解——各节内容分析

ELF文件内容详解——各节内容分析

文章目录 写在前面准备.text节.data节.strtab.symtab.shstrtab.shstrtab之后 写在前面 只看readelf这个工具说实话我感觉还是有点云里雾里&#xff0c;这里就逐字节分析一下ELF文件中text节&#xff08;代码段&#xff09;的内容 本文分析使用的汇编程序ELF文件内容详解这篇文…
阅读更多...
Redis之缓存雪崩问题解决方案

Redis之缓存雪崩问题解决方案

文章目录 一、书接上文二、介绍三、解决方案1. 锁2. 不同的过期时间3. 缓存预热和定时任务 一、书接上文 Redis之缓存穿透问题解决方案实践SpringBoot3Docker 二、介绍 缓存雪崩&#xff0c;指大量的缓存失效&#xff0c;大量的请求又同时落在数据库。主要的一种诱因是key设…
阅读更多...
【Java面试】MQ（Message Queue）消息队列

【Java面试】MQ（Message Queue）消息队列

目录 一、MQ介绍二、MQ的使用1应用解耦2异步处理3流量削峰4日志处理5消息通讯三、使用 MQ 的缺陷1.系统可用性降低：2.系统复杂性变高3.一致性问题四、常用的 MQActiveMQ：RabbitMQ：RocketMQ：Kafka：五、如何保证MQ的高可用?ActiveMQ：RabbitMQ：RocketMQ：Kafka：六、如何保…
阅读更多...
数据湖Iceberg、Hudi和Paimon比较

数据湖Iceberg、Hudi和Paimon比较

1.社区发展现状 项目Apache IcebergApache HudiApache Paimon开源时间2018/11/62019/1/172023/3/12LicenseApache-2.0Apache-2.0Apache-2.0Github Watch1481.2k70Github Star5.3k4.9k 1.7k Github Fork1.9k2.3k702Github issue(Open)898481263Github issue(closed)20542410488…
阅读更多...
【xss跨站漏洞】xss漏洞利用工具beef的安装

【xss跨站漏洞】xss漏洞利用工具beef的安装

安装环境 阿里云服务器&#xff0c;centos8.2系统&#xff0c;docker docker安装 前提用root用户 安装docker yum install docker 重启docker systemctl restart docker beef安装 安装beef docker pull janes/beef 绑定到3000端口 docker run --rm -p 3000:3000 janes/beef …
阅读更多...
小红书x-s算法及补环境 单旋转验证码

小红书x-s算法及补环境 单旋转验证码

前言 大家好呀!新的一年,先祝大家新年快乐咯.祝大家逆向,风控都一把过咯. 新年第一篇文章,后续会持续更新哦! 春晚见证了中国经济的新风口,今年春晚互联网企业赞助商就两家,小红书和京东.小红书类似国外的ins,有预感未来小红书会大火,所以写了这篇文章,有需要的加我,联系方式…
阅读更多...
MySQL多实例部署：从概念到实操的全面指南

MySQL多实例部署：从概念到实操的全面指南

目录 MySQL多实例管理 单实例 什么是多实例 多实例的好处 多实例的弊端 MySQL多实例用在哪些场景 资金紧张的公司 用户并发访问量不大的业务 大型网站也有用多实例 部署MySQL多实例 rpm和源码的优缺点 二进制方式安装mysql 准备二进制mysql运行所需的环境 准备多…
阅读更多...
让 K8s 更简单！8款你不得不知的 AI 工具-Part 2

让 K8s 更简单！8款你不得不知的 AI 工具-Part 2

在 part 1 中&#xff0c;我们探讨了目前比较流行的四种 OpenAI 开源工具。在今天的 part 2 中我们将探究另外三种不同的 OpenAI 开源工具并介绍一些与 Appilot 相关的内容。 Kubectl-GPT Kubectl-GPT 是一个 kubectl 插件&#xff0c;可使用 GPT 模型从自然语言输入生成 kube…
阅读更多...
MySQL加锁策略详解

MySQL加锁策略详解

我们主要从三个方面来讨论这个问题&#xff1a; 啥时候加&#xff1f;如何加&#xff1f;什么时候该加什么时候不该加&#xff1f; 1、啥时候加 1.1 显式锁 MySQL 的加锁可以分为显式加锁和隐式加锁&#xff0c;显式加锁我们比较好识别的&#xff0c;因为他往往直接体现在 S…
阅读更多...
【Git工具实战】实用真实 Git 开发工作流程

【Git工具实战】实用真实 Git 开发工作流程

前言 最近工作中发现&#xff0c;很多开发人员连最基本的Git怎么使用都不知道&#xff0c;比如什么时候切分支&#xff0c;什么时候合并代码&#xff0c;代码遇到冲突怎么办&#xff0c;经常出现掉代码&#xff0c;代码合并后丢失的情况。以下为个人总结的常规Git开发工作流程…
阅读更多...
创建型设计模式 - 原型设计模式 - JAVA

创建型设计模式 - 原型设计模式 - JAVA

原型设计模式 一 .简介二. 案例三. 补充知识 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一 .简介 原型模式提供了一种机制&#xff0c;可以将原始对象复制到新对象&#xff0…
阅读更多...
什么是车规级芯片？车规级芯片之NCV8450ASTT3G 自保护高压侧驱动器

什么是车规级芯片？车规级芯片之NCV8450ASTT3G 自保护高压侧驱动器

关于车规级芯片&#xff1a; 关于车规级芯片&#xff08;Automotive Grade Chip&#xff09;&#xff0c;车规级芯片是专门用于汽车行业的芯片&#xff0c;具有高可靠性、高稳定性和低功耗等特点&#xff0c;以满足汽车电子系统的严格要求。这些芯片通常用于车载电子控制单元&…
阅读更多...
mysql优化指南之原理篇

mysql优化指南之原理篇

之前碰到一个线上问题&#xff0c;在接手一个同事的项目后&#xff0c;因为工期比较赶&#xff0c;我还没来得及了解业务背景和大致实现&#xff0c;只是了解了上线发布的顺序和验证方式就进行了上线&#xff0c;在上线进行金丝雀的时候系统还没发生什么异常&#xff0c;于是我…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023