iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

JS30 錄 系列

JS30 是加拿大的獨立開發者 Wes Bos 設計的影片教學, 目的為鼓勵學習者跟著影片練習來融會貫通原生JS的各種概念. 由於自己在練習的過程中獲益良多, 深感其為優良讀物! 希望透過分享學習所得, 幫助到有需要的夥伴, 順便加深自己的印象, 好!

鐵人鍊成 | 共 30 篇文章 | 36 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第一屆鐵人賽
DAY 21

Day 21 - Speech Detection

緣起 記得在果王大賽中落選,因此憤憤不平而決定撼動整個農業界的老樹猴嗎?(詳情請見 Day4 、 Day6 )。為了實現大陰謀,他整整計畫了十五篇之久,決定踏出...

2018-01-09 ‧ 由 Arel 分享
DAY 22

Day 22 - Follow Along Link Highlighter

任務目標 製作一個會強調關鍵字的標記,當滑鼠移到某個關鍵字上頭時,標記會從畫面上追隨該關鍵字。範例連結 作法 要讓關鍵字標記真的有追隨過去的效果,只好創造出一個...

2018-01-10 ‧ 由 Arel 分享
DAY 23

Day 23 - Speech Synthesis

任務目標 使用語音合成 API 建立一台語音翻譯機。 範例連結 作法 在 Day 21 有提到 Web Speech API 分成聲音轉字串的語音辨識 (Spe...

2018-01-11 ‧ 由 Arel 分享
DAY 24

Day 24 - Sticky Nav

任務目標 讓網頁的導覽列一碰到瀏覽器視窗的頂部時便會黏在上面,移開時便會恢復原狀。 範例連結 作法 HTML架構如下: <!-- 導覽列上方有固定高度的大...

2018-01-12 ‧ 由 Arel 分享
DAY 25

Day 25 - Event Flow - Bubble and Capture

任務目標 明白事件同時觸發時的先後順序。 重點整理 先了解可能同時觸發事件的狀況,下面是爺元素、父元素、子元素,一個包一個,祖孫三代齊聚一堂。加了一些 CSS...

2018-01-13 ‧ 由 Arel 分享
DAY 26

Day 26 - Follow Along Dropdown

任務目標 滑鼠切換到導覽列的不同選項時,會顯示該選項的下拉式清單,此外,下拉式清單會以「移動」的方式切換。範例連結 作法 HTML 標籤如下。 <nav...

2018-01-14 ‧ 由 Arel 分享
DAY 27

Day 27 - Click and Drag

任務目標 點選物件、拖曳滑鼠讓該物件滑動。範例連結 作法 以下是 HTML 架構。 <div class="items">...

2018-01-15 ‧ 由 Arel 分享
DAY 28

Day 28 - Video Speed Controller

任務目標 做一條控制影片播放速度的調節器,滑鼠在上面滑動就能夠改變播放速度。 範例連結 作法 運用到的概念和 Day 11 的影片播放條很像。差別在於這次直接以...

2018-01-16 ‧ 由 Arel 分享
DAY 29

Day 29 - Final Countdown

任務目標 今天要來寫個倒數計時器,這也象徵著鐵人賽的倒數。 作法 HTML 架構如下: <div class="timer">...

2018-01-17 ‧ 由 Arel 分享
DAY 30

Day 30 - Whack A Mole !

任務目標 今天是最後一天!就以 JS 30 最後一篇打地鼠作結。 範例連結 作法 首先是 HTML 的架構。 <!-- 計分板 --> &l...

2018-01-18 ‧ 由 Arel 分享