本篇大綱
本篇會完成的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


前陣子搞了一個類似的抽午餐系統
是用 Excel 做的,只能自己離線玩玩…
剛好最近想升級成網頁版,分享給更多人
就像您這樣的網頁,超符合我的需求XD
只是我是完全新手…
(連用什麼 “程式” 去運行 “html, ccs, js” 部分都還不了解XD)
還在努力中!
感謝您分享,相信我應該會成功
(已請咖啡表示謝意 :D)
謝謝你~也恭禧你踏入了前端的不歸路(誤)
剛回頭看了一下Demo,才發現API key之前誤刪了,所以地圖沒跑出來。
已更新key,現在看Demo可以看到地圖了。
不好意思覺得很厲害,但是想請問如果想要在結果出來前,在某一個選項停留久一點之後再顯示最後抽籤結果,有一點像大部分抽獎遊戲那樣,以為抽中了,結果又偷轉這樣,請問該如何修改呢? 謝謝