主題 實作一個打地鼠的遊戲，有計分/計時功能。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素 設定隨機時間(第28天的範圍公...
主題 實作一個倒數計時器。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素 倒數計時器的數字顯示 預計結束時間的顯示 所有的按鈕...
主題 實作一個影片播放器的調整播放速度 bar。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素：速度條外框、速度條內框、音樂...
主題 實作一個隨著滑鼠點擊左右移動內容的效果。 成果 完整程式碼Demo效果 實作重點 CSS 可以把 overflow 改成 hidden 才不會漏出卷軸...
主題 實作一個隨著滑鼠停留後會下拉的選單列效果。 成果 完整程式碼Demo效果 實作重點 可以思考一下，動畫出現的時機。 CSS 先製作出樣式 滑鼠停留後會...
主題 了解 addEventListener 中的第三個參數 Event Bubbling(冒泡事件), Event Capture(捕捉事件), Propa...
主題 實作一個置頂的 Navbar。 成果 完整程式碼Demo效果 實作重點 CSS 利用 fixed 製作一個會黏在頂部的 nav .fixed-nav...
主題 實作一個文字輸入語音輸出的工具，有播放、暫停、語速、音量調整功能。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配文件 Sp...
主題 實作一個跟隨滑鼠移動的 HightLight 效果。 成果 完整程式碼Demo效果 實作重點 Javascript 主要使用 getBoundingCl...
主題 實作一個顯示當前方位與速度的工具。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配文件 (MDN)這個題目在手機上比較好看到...
主題 實作一個語音輸入文字輸出的工具。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配MDN 安裝/啟動 利用npm來安裝：np...
主題 實作一個 Webcam ，有拍照、下載、濾鏡的效果 成果 完整程式碼Demo效果 實作重點 Javascript 在驅動 webcam 前需要有一個...
主題 利用取得播放清單總秒數來複習陣列方法 reduce, map 的使用。 成果 完整程式碼Demo效果 實作重點 Javascript 取得所有的 l...
主題 利用編排文章排序來複習陣列方法sort, map, join, replace, trim 搭配正則的使用。 成果 完整程式碼Demo效果 實作重點 J...
主題 實作一個滑鼠移動時，產生不同陰影的效果 成果 完整程式碼Demo效果 實作重點 Javascript 先了解基本概念 offsetX , of...
主題 實作一個 LocalStorage 的紀錄菜單功能 成果 完整程式碼Demo效果 實作重點 Javascript 先了解 LocalStorage(...
主題 介紹 JS 賦值時，reference(參考、傳址) 與 copying(拷貝、傳值)。 成果 完整程式碼Demo效果 實作重點 Javascript 可...
主題 實作一個當畫面滾動到圖片區域時圖片以動畫方式跑出 成果 完整程式碼Demo效果 實作重點 學習 window 事件 Javascript 先了解 w...
主題 使用 Cornify.js 製作簡單的彩蛋效果。 成果 完整程式碼Demo效果 實作重點 Javascript 會使用 cornify.js ，放到...
主題 利用 <video> 標籤，實作影片播放器的基礎功能 成果 完整程式碼Demo效果 實作重點 <video> (MDN) 對照文...
主題 實作出按住 Shift 點擊 check list ，達到連續選取的效果 成果 完整程式碼Demo效果 實作重點 Javascript 類陣列轉陣列...
主題 介紹 dev tool，了解 javascript 裡 console 的實用功能。 成果 完整程式碼Demo效果 實作重點 Javascript...
主題 利用 HTML 的canvas 標籤搭配 JS 做出畫布的效果。實現畫筆顏色(hsl)和粗細變化。 成果 完整程式碼Demo效果 實作重點 Javasc...
主題 練習 JavaScript Array 的方法，可以對照 MDN 文件：Array.prototype.some() 、 Array.prototype...
主題 利用 Fetch API、非同步載入的方式，並配合正規表達式處理字串，實現使用者輸入的城市名稱時動態地查找相對應的資料。 成果 完整程式碼Demo效果...
Hazel
iThome鐵人賽
看影片追技術