前端 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 动态效果

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

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传类型(人数)即可

2.4 抽奖音效配置

可以自定义选中抽奖音效，在这块代码配置就行。

内置四种酷炫抽奖音效：

2.5 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

源码下载

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

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

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

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

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

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

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

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

精彩链接

 您阅读本篇文章共花了：