Day30 要來寫個打地鼠的小遊戲 資料 const MOLE_IMAGE_URL = "https://raw.githubuserconten...
主題 練習 JavaScript Array 的方法，可以對照 MDN 文件：Array.prototype.some() 、 Array.prototype...
主題 使用 Cornify.js 製作簡單的彩蛋效果。 成果 完整程式碼Demo效果 實作重點 Javascript 會使用 cornify.js ，放到...
主題 實作一個倒數計時器。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素 倒數計時器的數字顯示 預計結束時間的顯示 所有的按鈕...
主題 實作一個隨著滑鼠點擊左右移動內容的效果。 成果 完整程式碼Demo效果 實作重點 CSS 可以把 overflow 改成 hidden 才不會漏出卷軸...
主題 利用 <video> 標籤，實作影片播放器的基礎功能 成果 完整程式碼Demo效果 實作重點 <video> (MDN) 對照文...
主題 利用 Fetch API、非同步載入的方式，並配合正規表達式處理字串，實現使用者輸入的城市名稱時動態地查找相對應的資料。 成果 完整程式碼Demo效果...
主題 實作一個打地鼠的遊戲，有計分/計時功能。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素 設定隨機時間(第28天的範圍公...
Day21 要來做個羅盤 資料 const [geolocation, setGeolocation] = useState<Geolocation&...
主題 實作一個影片播放器的調整播放速度 bar。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素：速度條外框、速度條內框、音樂...
主題 實作一個顯示當前方位與速度的工具。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配文件 (MDN)這個題目在手機上比較好看到...
主題 了解 addEventListener 中的第三個參數 Event Bubbling(冒泡事件), Event Capture(捕捉事件), Propa...
主題 實作出按住 Shift 點擊 check list ，達到連續選取的效果 成果 完整程式碼Demo效果 實作重點 Javascript 類陣列轉陣列...
Day27 要來做個可以左右拖曳的目錄 資料 const items: number[] = Array.from({ length: 25 }, (_, i)...
主題 介紹 JS 賦值時，reference(參考、傳址) 與 copying(拷貝、傳值)。 成果 完整程式碼Demo效果 實作重點 Javascript 可...
Day19 是要操作照相機來拍照，甚至可以加上濾鏡 資料 const videoRef = useRef<HTMLVideoElement>(n...
Day20 要來控制麥克風 資料設定 const SpeechRecognition = (window as any).SpeechRecognition...
Day26 要來做個有下拉選單的導覽列 資料 const navItems: NavItem[] = [ { name: "About"...
Day17 要做的是幫列表排序，但要忽略開頭的定冠詞 資料 const bands: string[] = [ "The Plot in You&...
主題 實作一個當畫面滾動到圖片區域時圖片以動畫方式跑出 成果 完整程式碼Demo效果 實作重點 學習 window 事件 Javascript 先了解 w...
主題 利用 HTML 的canvas 標籤搭配 JS 做出畫布的效果。實現畫筆顏色(hsl)和粗細變化。 成果 完整程式碼Demo效果 實作重點 Javasc...
主題 介紹 dev tool，了解 javascript 裡 console 的實用功能。 成果 完整程式碼Demo效果 實作重點 Javascript...
主題 實作一個語音輸入文字輸出的工具。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配MDN 安裝/啟動 利用npm來安裝：np...
主題 實作一個隨著滑鼠停留後會下拉的選單列效果。 成果 完整程式碼Demo效果 實作重點 可以思考一下，動畫出現的時機。 CSS 先製作出樣式 滑鼠停留後會...
Day18 主要是要練習用 Array 的 reduce 方法來做加總的計算 資料 const videosData = [ { id: 1, title:...
主題 實作一個滑鼠移動時，產生不同陰影的效果 成果 完整程式碼Demo效果 實作重點 Javascript 先了解基本概念 offsetX , of...
主題 實作一個 Webcam ，有拍照、下載、濾鏡的效果 成果 完整程式碼Demo效果 實作重點 Javascript 在驅動 webcam 前需要有一個...
主題 實作一個文字輸入語音輸出的工具，有播放、暫停、語速、音量調整功能。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配文件 Sp...
主題 實作一個 LocalStorage 的紀錄菜單功能 成果 完整程式碼Demo效果 實作重點 Javascript 先了解 LocalStorage(...
主題 利用取得播放清單總秒數來複習陣列方法 reduce, map 的使用。 成果 完整程式碼Demo效果 實作重點 Javascript 取得所有的 l...
ayao
Hazel
iThome鐵人賽
看影片追技術