用原生 JS 做一個簡單的抽獎功能頁面

本篇會完成的Demo

這個是2年前製作的功能了，那時看見很多活動頁上都在玩抽獎，就自己動手寫了一個出來。

但只拿來玩抽獎覺得平常不太會用到，就把名稱改成「午餐吃什麼」，把抽獎的名單換成店家名稱，順便再加上Google Map進去，就解決不知道午餐要吃什麼的煩惱啦~

本篇用到資源

原本js的部份是用jQuery寫，這幾天改成原生的js，但是是用ES6，如果看完這篇想下載來用時，請再編譯成ES5才支援IE（在此宣傳請放棄IE這隻上古神獸）。

店家名單的部份，為了方便管理，是寫在Google Sheet上，如何把Google Sheet當資料庫用可參考這篇：如何用Google Excel當作資料庫

頁面上的CSS是自己手刻，icon的部份用FontAwesome 4.7版。

html部份

html的部份，分為顯示名單、按鈕、地圖，這三個大區塊，都用html5的語意化標籤section包起來。

按鈕分二個，分別是切換素/葷食，以及啟動抽獎。

切換素/葷食改在抽獎的話，可以是「會員/非會員」、「有資料/無資料」等選項，就在撈名單的步驟分成兩個陣列來存就行。

參考原始碼如下：

看html可以發現，切換素/葷食的按鈕，實際上是checkbox，樣式全做在label跟span上，input本身不寫樣式，只寫checked時相鄰的span變化。

在start按鈕，加入了四個span，這主要是做按鈕四個邊的動畫效果。

iframe的google map先不寫src的值，這會用js去抓抽獎結果的文字塞。

css部份

css部份唯一要說明的，就是按下start後，會跑的拉霸動畫。

拉霸動畫不難，就是讓每一個選項的top從0%-100%時一直往上移，名單愈多的，它的top就愈大，執行動畫秒數就愈多。

一般來說，可以用js去計算抽獎名單的數目，然後每一多個名單，top、animation-duration就相對遞增。

但，sass本身也有for迴圈可以使用。之前看過一句話，就是能用css解決的事，就不用js去解決，因為js比較耗資源。（不要問是哪裡看到的，我也忘了）

sass的迴圈可以拿來做計算，本功能寫的如下：

@for $i from 1 through 50
  $t: .03s * $i
  @keyframes spin-#{$i}
    from
      top: 0
    to
      top: calc(-73px * #{$i})
  .god .wrap > .span-#{$i}
    animation-name: spin-#{$i}
    animation-duration: $t

預設先寫了50個名單內的animation，如果名單有超過再改數字重新編譯就行。

補充說明一個效果，就是start按鈕四個邊線的效果。

其實就是讓四個邊的delay時間不一樣，transition-origin的起點也不一樣就行。

js部份

js部份看原始碼就可以看到，說明的註解也都寫了上去。

要說明的就是，其實在按下start按鈕後，中獎名單就已經出來了，拉霸在那邊跑是掩人耳目用，最後再用setTimeout去移掉拉霸效果跟放google map iframe的src。

中獎名單用一個簡單的取亂數function就行：

r = () => {
  max = toggle.length - 1;
  min = 0;
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

取亂數的最大值，就是抽獎名單的總數-1，因為陣列是從0開始算，所以要-1。

google map的部份是用google map embed API，選用基本的place mode，是免費的，才不會說玩到一半還要收錢，embed API用的src url如下：

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=店家名稱

YOUR_API_KEY要從google cloud platform去建立專案後取得。店家名稱直接複製google map的店家名稱即可。

相關文章：Google Map API學習筆記-1：地圖、標記、客製樣式

抽獎名單資料庫

抽獎名單的資料庫，選用的是Google Sheet，之所以會選擇Excel而不是Firebase，主要是製作時想讓非工程師的人員來維護，而又懶得再花時間製作一個後台介面，就選了大家普遍會用的Excel。

在Google Sheet上的資料可以直接看這，就是從這邊撈取抽獎名單的：

範例頁面、原始碼

本篇完成的範例頁面在這，大家可以玩玩看，直接查看頁面原始碼可以看到html、js：

https://letswritetw.github.io/letswrite-food-check/

原始碼也放上Github了，可以直接下載使用：

https://github.com/letswritetw/food-check

Summary

Article Name

用原生JS做一個簡單的抽獎功能頁面

Description

本篇大綱：本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎，就自己動手寫了一個出來。把名稱改成「午餐吃什麼」，把抽獎的名單換成店家名稱，順便再加上Google Map進去，就解決不知道午餐要吃什麼的煩惱啦~

Augustus

Augustus

Let's Write

Let's Write

https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg