由小專案學程式--Color Flipper

更新 發佈閱讀 3 分鐘

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




vocus|新世代的創作平台




vocus|新世代的創作平台




vocus|新世代的創作平台

小問題

習慣上我會把連結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中挑選出來的符號,呈現到頁面上。

留言
avatar-img
Err500
18會員
84內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
Err500的其他內容
2025/04/03
這篇文章記錄了作者使用 Go 語言和 Ebitengine 遊戲引擎開發 2D 遊戲的心得,從專案初始化、安裝套件、實作遊戲介面到處理鍵盤輸入和邊界等,並分享了遊戲開發中學習到的經驗與知識。
Thumbnail
2025/04/03
這篇文章記錄了作者使用 Go 語言和 Ebitengine 遊戲引擎開發 2D 遊戲的心得,從專案初始化、安裝套件、實作遊戲介面到處理鍵盤輸入和邊界等,並分享了遊戲開發中學習到的經驗與知識。
Thumbnail
2025/03/28
本文章提供Neovim在Windows環境下的安裝教學與入門設定,從基本安裝、環境變數設定到使用kickstart.nvim套件快速配置IDE環境,降低新手入門門檻。文章也提及了進階設定與客製化的方向。
Thumbnail
2025/03/28
本文章提供Neovim在Windows環境下的安裝教學與入門設定,從基本安裝、環境變數設定到使用kickstart.nvim套件快速配置IDE環境,降低新手入門門檻。文章也提及了進階設定與客製化的方向。
Thumbnail
2025/03/27
前言 Discord聊天時發現而機會出現電流聲,不確定是不是雜音抑制反而暴露了微小的噪音,一方面在公司內開會,可以插3.5mm耳機孔,登入會議軟體方便一點,只是不好意思拿耳罩式到公司,顯得太過張揚,趁還有點數來網購新玩物。
Thumbnail
2025/03/27
前言 Discord聊天時發現而機會出現電流聲,不確定是不是雜音抑制反而暴露了微小的噪音,一方面在公司內開會,可以插3.5mm耳機孔,登入會議軟體方便一點,只是不好意思拿耳罩式到公司,顯得太過張揚,趁還有點數來網購新玩物。
Thumbnail
看更多
你可能也想看
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News