系列文章
Day 11 - Custom Video Player
任務目標 自製一個影片播放器的介面, 內容將包含： 影片進度條: 進度條要能夠顯示影片播放進度, 進度條會自動跳轉到滑鼠點擊位置, 進度條會隨著滑鼠拖曳改變進...
Day 12 - Key Sequence Detection
緣起 Dudi來自印尼, 多年前和丈夫與孩子離別, 隻身一人飄洋過海來台打工, 奮鬥數年後終於事業有成. 遙想當年 Dudi 與丈夫約定, 事業有成時一定要讓他...
Day 13 - Slide in on Scroll
任務目標 如果一篇網頁文章長到需要滾動瀏覽器 Y 軸才能看完， 為了文章中的插圖能夠吸引讀者的注意，有時會希望滑鼠滑到圖片位置時， 圖片才出現。範例連結 今天就...
Day 14 - Reference Copy or Value Copy ?
任務目標 能夠區別變數值在傳遞時是透過「複製參考」還是「複製值」。 重點整理 在撰寫JS程式碼時，常會有將值指定給變數一，再把變數一指定給變數二這種傳遞值的行為...
Day 15 - Local Storage
任務目標 製作一個待辦清單，該清單所儲存的待辦事項即使網頁關掉再重開，記錄仍是保存的。 作法 一個簡單的待辦清單架構如下 <div class="...
Day 16 - Mouse Move Shadow
緣起 還記得 Dudi 嗎？ 在 Day 12 ， Dudi 始終沒有接收到來自家鄉的老公的回應，為此她倍感消沈，每日借酒澆愁，好不愉快。隨著酗酒的日子長了，...
Day 17 - Sort Without Articles
任務目標 今天要來分類歌單！首先有一串存在陣列中的歌單，我們希望將歌單不考慮 "A" 、 "The" 、 "...
Day 18 - Adding Up Time With Reduce
緣起 我們的好朋友，喧猴，有收藏影片跟分享影片的習慣。日積月累下來，喧猴也在自己的網頁上張貼了許多的影片。今天，喧猴心血來潮想要清點一下他所搜集的影片總時間長度...
Day 19 - Webcam Fun - Part I - Take a Photo from Webcam
任務目標 擷取視訊鏡頭得到的影片，實現按鍵快照、預覽照片及下載存檔。 作法 首先是HTML檔的架構，程式碼如下： <!--拍照鈕--> <di...
Day 20 - Webcam Fun - Part II - Pixel Manipulation
任務目標 接續昨天，這次要對擷取下來的影像做畫素操控，讓影像實現灰階、負片、左右翻轉、鏡像等各種光怪陸離的效果！像這樣。 作法 前情提要，昨天我們已經將視訊鏡頭...