0%

大屏抽奖项目总结

发表于 更新于 分类于 Disqus：
本文字数： 1.5k 阅读时长 ≈ 2 分钟

本次大屏抽奖项目采用纯前端技术实现。

项目需求

  1. 一等奖与其他奖项的抽奖人员名单不同。
  2. 三等奖需抽取两次。
  3. 抽奖人员名单在抽奖当日提供 Excel 文件。
  4. 大屏展示抽奖页面，共有三种状态切换：
    1. 等待抽奖：抽奖未开始时展示效果。
    2. 开始抽奖：动画展示抽奖人员名单。
    3. 停止抽奖：展示中奖人员名单。

项目实现方案

设计页面介绍：

  1. 抽奖页：此页面将投放至大屏展示。
  2. 抽奖操控页：此页面由抽奖人根据主持人指示操作开始、结束抽奖。
  3. Excel 文件数据提取页：用于将甲方提供的中奖人员名单转换成 json 数据格式保存至 localStorage 中。
  4. 恢复页：用于恢复抽奖页状态。
    1. 各奖项抽奖中、各奖项中奖人员名单。
    2. 等待抽奖。
    3. 导出中奖人员名单：将中奖人员的 json 数据导出至 Excel 文件中。

项目采用 localStorage 来进行页面间的消息存储。

  • 抽奖页通过 setIntval 定时器监听 localStorage 中操作项值的变化，来进行页面中元素展现。

  • 抽奖操控页实现奖品的抽取及操作项状态的变更。

注意事项

  1. 页面设计的尺寸在大屏上展示的效果不理想：可以试试 ctrl - 、ctrl + 缩放下页面。

    大屏也只是个屏幕而已，电脑连接上后，选择扩展屏幕，将抽奖页拖动到大屏屏幕，然后全屏展示即可：

    • Windows：F11 全屏。

    • MacOS：Command + Ctrl + F Chrome窗口最大化（隐藏菜单栏及Docker栏），Command + Shift + F Chrome全屏（隐藏Chrome 的 tab 标签栏及地址栏）。

  2. 注意原数据格式问题：因甲方提供的是 Excel 文件，其中的人员名单保存到 json 中时要特别注意人名中有可能存在 \n，\t 等特殊字符，这些特殊字符需提前处理掉，不然在中奖名单中就会像这样展示：王\t五。

  3. 注意中奖人员姓名拼接问题：甲方提供的人员名单中 姓 与 名 是拆开的。在对其进行合并时要注意中文姓名中间不能加空格，英文姓名则需要加空格。

    1
    2
    3
    4
    function isAllChinese(str) {
      const reg = /[^\u4e00-\u9fa5]/;
      return !reg.test(str);
    }

  4. 注意抽奖端操控便利性问题：鼠标点击不如键位便捷准确，在进行奖品选项选择时可通过监听键盘：数字1、数字2、数字3 来对应奖品：一等奖、二等奖、三等奖。绑定 Enter 键代替鼠标点击 开始抽奖、停止抽奖、返回 按钮。

    1. 你不知道场控方提供的电脑是否带外接鼠标，场地是否有足够的空间来操作鼠标。警惕：触摸板。
    2. 第二个为什么要用键盘来代替鼠标的理由：你看看中控台就知道了，全是实体键位操控。

  5. 注意采集卡传输分辨率。

    如果采集卡传输分辨率是1920*1080，而屏显分辨率是 2048*768。则页面设计的时候最好做两版。因为你不知道场控方是否可以调整采集卡分辨率，调整后是否有背景图失真情况。

    在彩排时发现图片及文字在最终屏幕上有变形，经与场控方沟通后才得知采集卡分辨率是1920*1080，而我们是按照屏显 2048*768做的。在配合场控方调整外屏分辨率时，虽然文字及图片显示正常了，但是图片失真很严重。在调回原始分辨率后图片也失真，无法还原到初始状态了。更换到另一个采集卡

项目收尾

因程序是放在场控方提供的电脑上运行，应甲方数据保密要求需处理好善后工作。

  1. 清除 localStroage 中的全部数据。

  2. 删除抽奖程序：shift + delete 键删除。

    这里有个小插曲哈，第一次删除的时候没按 shift 键，文件进到回收站了，而回收站又打不开：

    Win + R 打开 cmd 命令行。

    1
    rd /s /q C:$Recycle.Bin