每當我們在元旦，年會的時刻，總是無法避免地出現(xiàn)抽獎環(huán)節(jié)。身為專業(yè)程序員的我們自然應當負起這份責任，確保這場抽獎活動能夠順利流暢地進行下去。然而，面對眾多待完成的工作任務(wù)，我們恐怕又需要進一步延長加班時間來應對。請別擔憂，在此，為您提供了一款卓越出色的現(xiàn)成抽獎網(wǎng)頁，可用于此次年度盛典的抽獎環(huán)節(jié)中。首先，讓我們共同欣賞一下實際應用表現(xiàn)吧！

此頁面所有實現(xiàn)均采用最基本的JavaScript、html和jQuery技術(shù)完成，無需使用任何框架，開箱即用。

設(shè)置數(shù)據(jù)

參與抽獎的數(shù)據(jù)需要提前設(shè)定好，在 js 目錄中，data.js 里，文件和結(jié)構(gòu)如下：

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

每個數(shù)據(jù)都按此標準結(jié)構(gòu)構(gòu)建即可。img 可以使用默認的， 也可以自行提供照片，id 需要隨機指定一個數(shù)字，保證不與列表內(nèi)的其他數(shù)據(jù)相同即可。設(shè)置新數(shù)據(jù)后刷新后就能使用。

功能擴展

現(xiàn)有的功能里沒有作弊選項（不能設(shè)置必中項），而且一個人可以重復多次中獎，因此需要添加以下內(nèi)容來擴展。

# 編輯lucy.js
# 在Obj 對象下定義兩個變量

Obj.writeList = [0] # 用于存放白名單列表
Obj.hasLuck = [] # 用于記錄已中獎下標

# 新增去重函數(shù)
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
}

# 重寫中獎隨機函數(shù)
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)
    }
}

在上述代碼中， 提供一個去重函數(shù)，并使用遞歸調(diào)用，保證每次數(shù)據(jù)都做去重校驗。如果數(shù)據(jù)有重復，則使用當前下標減一，如果小于 0 則，直接將下標調(diào)到最大，如果所有人都中獎了， 則始終返回第一個人的結(jié)果。

在randomLuckyArr 中， 則調(diào)用去重函數(shù)，并將每次中獎的數(shù)據(jù)都保存到 hasLuck 中。

對于需要暗箱的內(nèi)容的內(nèi)容則在luckyResult.push 之前，寫好相應的邏輯即可，如上代碼中，就是抽 3 回后保證第 4 回，中獎的人為writeList 中的（暗箱雖好，可不要貪杯[靈光一閃]）。

有需要的朋友請來個三連獲取。

#文章首發(fā)挑戰(zhàn)賽#

#頭條創(chuàng)作挑戰(zhàn)賽#

#挑戰(zhàn)30天在頭條寫日記#

#我的2023年終總結(jié)#

人人都是產(chǎn)品經(jīng)理【起點學院】，BAT實戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學產(chǎn)品、學運營。

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

作為一個網(wǎng)頁的產(chǎn)品經(jīng)理，網(wǎng)頁的前端知識可謂是不能不知，本文主講網(wǎng)站產(chǎn)品的前端姿勢。

通常，HTML、CSS、JavaScript共同構(gòu)建了你看到的任何一個網(wǎng)頁展示和交互。

下面是這三種字母的解釋：

• HTML(HyperTextMarkup Language) 超文本標記語言
• CSS（Cascading Style Sheets）級聯(lián)樣式表
• JavaScript 一種腳本語言，主要用于前端頁面的DOM處理

不太懂可自行百度了解。

文本的意思，應該大家都明白，就是你隨手在桌面上建立一個txt，這就是一個文本文件。

那什么是HTML超文本標記語言呢？就是對一個普通的txt里面的文字進行標記，標記其中的一段為title，標記任意一段為某個意思，最終形成了一套規(guī)則就是html。

一個html文檔通常的結(jié)構(gòu)是這樣的：

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

下面我們來看一段html：

看下面這段代碼截圖：

“電動汽車_新能源汽車_電動汽車網(wǎng)”原先是普通的文本，但是這里套了<title>，用于標記此處是標題，同時也告訴了搜索引擎這里是標題。

再看下面這段代碼截圖：

紅色標注部分就是CSS樣式代碼。CSS中文名叫級聯(lián)樣式表，白話就是說長什么樣子。CSS就是起裝修作用的，必須要和HTML一起配合使用。

再看下面這段代碼截圖（和第一張圖一樣）：

上圖第二個紅色標注的地方就是JavaScript，JavaScript是一種腳本語言，它在網(wǎng)頁中使用的主要場景是控制HTML中的每一個元素。比如，點了一個按鈕會彈出一個層，其實就是利用JavaScript實現(xiàn)的。

目前的互聯(lián)網(wǎng)，任何一個網(wǎng)頁都是由他們?nèi)齻€構(gòu)建起來的，作為網(wǎng)頁產(chǎn)品經(jīng)理必須知道，若是能夠看懂、簡單修改甚至是自己寫，那就更棒了，再深的介紹就不在此說明了。

當然作為創(chuàng)業(yè)公司的產(chǎn)品經(jīng)理還有注意前端頁面規(guī)范和兼容性的問題，作為合格的前端工程師上面說的都應該必須過關(guān)，作為產(chǎn)品經(jīng)理也必須明了。

比如html文檔格式，必須有的dtd格式，文件編碼utf－8等這些常識性姿勢。

除了html，大家應該還看到htm、shtml、xhtml等這些文檔，大家可以自行百度做了解，究竟有什么用和什么區(qū)別。

說到這里大家應該想問了，html應該用什么軟件開發(fā)呢？Dreamweaver，百度自行了解。

本文僅適用于產(chǎn)品新人，產(chǎn)品大佬可以忽略。

#專欄作家#

董海榮，微信公眾號：pingyaonr，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注智能汽車、移動互聯(lián)網(wǎng)和虛擬現(xiàn)實。擅長內(nèi)容編輯運營、原型設(shè)計、需求挖掘梳理、產(chǎn)品規(guī)劃管理。歡迎交流學習。