每当我们在元旦，年会的时刻，总是无法避免地出现抽奖环节。身为专业程序员的我们自然应当负起这份责任，确保这场抽奖活动能够顺利流畅地进行下去。然而，面对众多待完成的工作任务，我们恐怕又需要进一步延长加班时间来应对。请别担忧，在此，为您提供了一款卓越出色的现成抽奖网页，可用于此次年度盛典的抽奖环节中。首先，让我们共同欣赏一下实际应用表现吧！

此页面所有实现均采用最基本的JavaScript、html和jQuery技术完成，无需使用任何框架，开箱即用。

设置数据

参与抽奖的数据需要提前设定好，在 js 目录中，data.js 里，文件和结构如下：

personArray.push({
  id: 546,
  image :"img/tx.png",
  thumb_image :"img/tx.png",
  name: "张三"
});

每个数据都按此标准结构构建即可。img 可以使用默认的， 也可以自行提供照片，id 需要随机指定一个数字，保证不与列表内的其他数据相同即可。设置新数据后刷新后就能使用。

功能扩展

现有的功能里没有作弊选项（不能设置必中项），而且一个人可以重复多次中奖，因此需要添加以下内容来扩展。

# 编辑lucy.js
# 在Obj 对象下定义两个变量

Obj.writeList = [0] # 用于存放白名单列表
Obj.hasLuck = [] # 用于记录已中奖下标

# 新增去重函数
function doRepeatResult(num){
  console.log(Obj.hasLuck.length, personArray.length)
  if(Obj.hasLuck.includes(num)){
    console.log('存在重复中奖, 重新抽奖', num )
    num = num - 1
    if(num < 0){
      num = num + personArray.length
    }
    if(Obj.hasLuck.length >= personArray.length){
      return 0
    }
    return doRepeatResult(num)
  }
  return num
}

# 重写中奖随机函数
function randomLuckyArr() {
    Obj.luckyResult = [];
    for (var i = 0; i < Obj.luckyNum; i++) {
        var random = Math.floor(Math.random() * personArray.length);
        if (Obj.luckyResult.indexOf(random) == -1) {
    if(Obj.writeList.length > 0 && Obj.hasLuck.length > 2){
      random = Obj.writeList[0]
      random = doRepeatResult(random)
      Obj.luckyResult.push(random)
      Obj.writeList.shift()
    } else {
      random = doRepeatResult(random)
      Obj.luckyResult.push(random)
    }
            Obj.hasLuck.push(random)
        } else {
            i--;
        }
  console.log("已中奖下标", Obj.hasLuck)
    }
}

在上述代码中， 提供一个去重函数，并使用递归调用，保证每次数据都做去重校验。如果数据有重复，则使用当前下标减一，如果小于 0 则，直接将下标调到最大，如果所有人都中奖了， 则始终返回第一个人的结果。

在randomLuckyArr 中， 则调用去重函数，并将每次中奖的数据都保存到 hasLuck 中。

对于需要暗箱的内容的内容则在luckyResult.push 之前，写好相应的逻辑即可，如上代码中，就是抽 3 回后保证第 4 回，中奖的人为writeList 中的（暗箱虽好，可不要贪杯[灵光一闪]）。

有需要的朋友请来个三连获取。

#文章首发挑战赛#

#头条创作挑战赛#

#挑战30天在头条写日记#

#我的2023年终总结#

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

2016年了，嗨，大家新年好。

作为一个网页的产品经理，网页的前端知识可谓是不能不知，本文主讲网站产品的前端姿势。

通常，HTML、CSS、JavaScript共同构建了你看到的任何一个网页展示和交互。

下面是这三种字母的解释：

• HTML(HyperTextMarkup Language) 超文本标记语言
• CSS（Cascading Style Sheets）级联样式表
• JavaScript 一种脚本语言，主要用于前端页面的DOM处理

不太懂可自行百度了解。

文本的意思，应该大家都明白，就是你随手在桌面上建立一个txt，这就是一个文本文件。

那什么是HTML超文本标记语言呢？就是对一个普通的txt里面的文字进行标记，标记其中的一段为title，标记任意一段为某个意思，最终形成了一套规则就是html。

一个html文档通常的结构是这样的：

doctype、html、head(/head)、body(/body)、/html。

下面我们来看一段html：

看下面这段代码截图：

“电动汽车_新能源汽车_电动汽车网”原先是普通的文本，但是这里套了<title>，用于标记此处是标题，同时也告诉了搜索引擎这里是标题。

再看下面这段代码截图：

红色标注部分就是CSS样式代码。CSS中文名叫级联样式表，白话就是说长什么样子。CSS就是起装修作用的，必须要和HTML一起配合使用。

再看下面这段代码截图（和第一张图一样）：

上图第二个红色标注的地方就是JavaScript，JavaScript是一种脚本语言，它在网页中使用的主要场景是控制HTML中的每一个元素。比如，点了一个按钮会弹出一个层，其实就是利用JavaScript实现的。

目前的互联网，任何一个网页都是由他们三个构建起来的，作为网页产品经理必须知道，若是能够看懂、简单修改甚至是自己写，那就更棒了，再深的介绍就不在此说明了。

当然作为创业公司的产品经理还有注意前端页面规范和兼容性的问题，作为合格的前端工程师上面说的都应该必须过关，作为产品经理也必须明了。

比如html文档格式，必须有的dtd格式，文件编码utf－8等这些常识性姿势。

除了html，大家应该还看到htm、shtml、xhtml等这些文档，大家可以自行百度做了解，究竟有什么用和什么区别。

说到这里大家应该想问了，html应该用什么软件开发呢？Dreamweaver，百度自行了解。

本文仅适用于产品新人，产品大佬可以忽略。

#专栏作家#

董海荣，微信公众号：pingyaonr，人人都是产品经理专栏作家。关注智能汽车、移动互联网和虚拟现实。擅长内容编辑运营、原型设计、需求挖掘梳理、产品规划管理。欢迎交流学习。