系列文章
Day 21 - Speech Detection
緣起 記得在果王大賽中落選，因此憤憤不平而決定撼動整個農業界的老樹猴嗎？（詳情請見 Day4 、 Day6 ）。為了實現大陰謀，他整整計畫了十五篇之久，決定踏出...
Day 22 - Follow Along Link Highlighter
任務目標 製作一個會強調關鍵字的標記，當滑鼠移到某個關鍵字上頭時，標記會從畫面上追隨該關鍵字。範例連結 作法 要讓關鍵字標記真的有追隨過去的效果，只好創造出一個...
Day 23 - Speech Synthesis
任務目標 使用語音合成 API 建立一台語音翻譯機。範例連結 作法 在 Day 21 有提到 Web Speech API 分成聲音轉字串的語音辨識 (Spee...
Day 24 - Sticky Nav
任務目標 讓網頁的導覽列一碰到瀏覽器視窗的頂部時便會黏在上面，移開時便會恢復原狀。範例連結 作法 HTML架構如下： <!-- 導覽列上方有固定高度的大圖...
Day 25 - Event Flow - Bubble and Capture
任務目標 明白事件同時觸發時的先後順序。 重點整理 先了解可能同時觸發事件的狀況，下面是爺元素、父元素、子元素，一個包一個，祖孫三代齊聚一堂。加了一些 CSS...
Day 26 - Follow Along Dropdown
任務目標 滑鼠切換到導覽列的不同選項時，會顯示該選項的下拉式清單，此外，下拉式清單會以「移動」的方式切換。範例連結 作法 HTML 標籤如下。 <nav...
Day 27 - Click and Drag
任務目標 點選物件、拖曳滑鼠讓該物件滑動。範例連結 作法 以下是 HTML 架構。 <div class="items">...
Day 28 - Video Speed Controller
任務目標 做一條控制影片播放速度的調節器，滑鼠在上面滑動就能夠改變播放速度。範例連結 作法 運用到的概念和 Day 11 的影片播放條很像。差別在於這次直接以滑...
Day 29 - Final Countdown
任務目標 今天要來寫個倒數計時器，這也象徵著鐵人賽的倒數。 作法 HTML 架構如下： <div class="timer">...
Day 30 - Whack A Mole !
任務目標 今天是最後一天！就以 JS 30 最後一篇打地鼠作結。範例連結 作法 首先是 HTML 的架構。 <!-- 計分板 --> <...