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

2024-02-23 18:12

本文主要是介绍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(防止抄袭,原文地址不可删除)

这篇关于HTML5新婚、年会、各种聚会的现场抽奖活动(附源码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/739488

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

Java ArrayList扩容机制 (源码解读)

结论:初始长度为10,若所需长度小于1.5倍原长度,则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义         1:数组默认长度         2:这是一个共享的空数组实例,用于明确创建长度为0时的ArrayList ,比如通过 new ArrayList<>(0),ArrayList 内部的数组 elementData 会指向这个 EMPTY_EL

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时,发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null,再判断Count。 看了一下Count的源码如下: 1 [__DynamicallyInvokable]2 public int Count3 {4 [__DynamicallyInvokable]5 get

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

工厂ERP管理系统实现源码(JAVA)

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本,并实时掌握各环节的运营状况。 在采购管理方面,系统能够处理采购订单、供应商管理和采购入库等流程,确保采购过程的透明和高效。仓库管理方面,实现库存的精准管理,包括入库、出库、盘点等操作,确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、