由小專案學程式--Color Flipper

閱讀時間約 2 分鐘
在youtube上找尋前端的小專案來練習,就發現了這個不是很難,又可以讓我練習怎麼把javascript用在網頁裡的專案,於是就跟者影片做了一遍。當然,比起前一個寫遊戲的影片來說,可以說是輕鬆很多。雖然頁面呈現很漂亮,但不是我自己開發的,影片作者好心地把css的程式碼一起附在了github供下載,而我主要也是專注在透過javascript寫好的功能嵌入html達到我要的功能,下面大致說明一下是怎麼做到的。

基本版本--點選後隨機變換4種固定底色

16進位版本--點選後隨機變換底色

index.html

小問題

習慣上我會把連結css檔案的標籤<link>以及連結javascript檔案的標籤<script>都放在<head>裡面,不過以這個專案來說,當執行javascript前必須要有DOM物件的生成,而這個DOM物件在<body>中,造成執行javascript時找不到東西而沒有變化,因此才把<script>標籤移到<body>內的末端。

功能實作概念

在頁面中生成一個按鈕,當滑鼠點擊按鈕時,頁面會變換顏色。
在第一個simple的版本中,事先把寫好的4種顏色放在list中,對應的index位置為0、1、2、3,當滑鼠點擊按鈕,執行寫好的function,function內容引入數學套件,控制取亂數的範圍為0~3之間的整數,並且回傳此數字在list中對應的顏色,改變html中的底色。
在第二個Hex的版本,隨機選取的範圍更改,而在這裡要先說明一下色碼的概念:
以程式中的顏色組成為(Red, Green, Blue),原色參與的程度介於數字0~255之間,也就是說顏色範圍在(0,0,0)~(255,255,255)。當然也可以用另一個比較常見的16進位表示法,即#000000~#FFFFFF,其中#表示後面顯示為16進位,16進位表示由0、1、2、....9、A、B、C....E、F。每兩個符號代表一個顏色,每個符號有16種可能,也就是16*16=256,與0~255是一樣的意義。
因此,第二個版本只是稍微修改一下程式,回傳#加上6個從0~F中挑選出來的符號,呈現到頁面上。
11會員
55內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
【菲菲小學堂】兒童性虐待(Child sexual abuse)兒童性虐待的範疇較廣泛,其核心定義是透過暴力或脅迫使兒童進行性活動,而造成對他們的傷害,無論兒童是否意識到自己受到性虐待。
Thumbnail
【菲菲小學堂】兒童性剝削(Child sexual exploitation)當兒童為了換取來自第三方、加害人或兒童本身的某件事物(如收益或好處,或甚至是對這些事物的承諾),而參與性活動,則這位兒童就是性剝削的被害人。
Thumbnail
社區型職業體驗學習歷程檔案 – 傳香深滷不煎炸雲端廚房【小六版、國中版食品群×餐旅群】二十一世紀的現在,如果說講到可以外送的「速食」,你會想到什麼呢? 是有漢堡、薯條、炸雞、蛋塔的麥當勞或肯德基嗎?想必這時候腦袋裡瞬間閃過的都是常點的那些餐點,但現在講到速食或許我們能有更多選擇,而且顛覆我們的想像。 這次我們帶學生們來體驗的職業類群是食品跟餐旅學群,而負責讓我們體驗的店家則是位在高雄
Thumbnail
專案啟動會議Kickoff meeting教戰手冊俗話說好的開始是成功的一半。專案一開始也需要有個好的開頭,後續專案做起來才容易上軌道,而這個開頭就叫做啟動會議或是Kickoff meeting。
Thumbnail
2021-01-12
有理小姐的新家進行式#10:新家裝修過程大公開!之前在「有理小姐的新家進行式」中,只有介紹裝潢前和設計師討論平面配置跟3D的過程,後來就沒有再介紹施工過程及裝潢結果。 這次有理將新家裝修過程一次公開,希望能幫助更多有同樣需求的朋友喔!!
Thumbnail
小案子、大思索:以簡單的英文「疫情」標語為例文案作者的身價往往不是來自驚天動地的偉大作品,而是來自客戶累積的信賴感。而這樣的信賴感,來自你對於使用情境的理解、以及對作品內容的細心考量。
Thumbnail
2020-02-05