文章目录

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

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

html实现酷炫公司年会抽奖 html实现酷炫公司年会抽奖，可以直接配置员工信息然后使用的，实现动态配置员工信息，实现员工只能中一次奖，实现奖品可灵活配置，实现样式灵活调整，实现抽奖酷炫音效，并且有多种震撼音效可选，可以直接运行index.html使用。

1.设计来源

1.1 主界面

抽奖主界面，上侧是公司活动名称，下面分为左右两个版块，左边是员工信息（抽奖名单），右边是奖项信息。
员工信息：上来展示的12个随机抽取的员工，目前总共30个人员信息。
奖品信息：目前设置的三个奖项，特等奖1人，一等奖2人，二等奖十人，这个可以根据自己的需求配置。

1.2 抽奖效果

抽奖效果是动态的文字切换和背景抽奖音效，图片体现不出来效果，具体效果见下面的视频演示。

1.2 中奖效果


左边是中奖员工，右边是中奖奖品，奖品那个地方色调可以自己调，有图片的psd文件，直接用ps修改即可。

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+="]";

2.3 奖品信息配置

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

特等奖(1人)
现金1000元一等奖(2人)
现金500元二等奖(10人)
现金200元

2.4 抽奖音效配置

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

内置四种酷炫抽奖音效：

2.5 源代码

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

  公司年会抽奖活动2023年公司年会抽奖活动
恭 喜 以 下 员 工 中 奖
    抽 奖 名 单
    开 始返 回详 细特等奖(1人)
    现金1000元一等奖(2人)
    现金500元二等奖(10人)
    现金200元

    源码下载

    html实现酷炫的公司年会抽奖（源码） 点击下载

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

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

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

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

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

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

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