iT邦幫忙

鐵人檔案

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

JS30 錄 系列

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

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

Day 11 - Custom Video Player

任務目標 自製一個影片播放器的介面, 內容將包含: 影片進度條: 進度條要能夠顯示影片播放進度, 進度條會自動跳轉到滑鼠點擊位置, 進度條會隨著滑鼠拖曳改變進...

2017-12-30 ‧ 由 Arel 分享
DAY 12

Day 12 - Key Sequence Detection

緣起 Dudi來自印尼, 多年前和丈夫與孩子離別, 隻身一人飄洋過海來台打工, 奮鬥數年後終於事業有成. 遙想當年 Dudi 與丈夫約定, 事業有成時一定要讓他...

2017-12-31 ‧ 由 Arel 分享
DAY 13

Day 13 - Slide in on Scroll

任務目標 如果一篇網頁文章長到需要滾動瀏覽器 Y 軸才能看完, 為了文章中的插圖能夠吸引讀者的注意,有時會希望滑鼠滑到圖片位置時, 圖片才出現。範例連結 今天就...

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

Day 14 - Reference Copy or Value Copy ?

任務目標 能夠區別變數值在傳遞時是透過「複製參考」還是「複製值」。 重點整理 在撰寫JS程式碼時,常會有將值指定給變數一,再把變數一指定給變數二這種傳遞值的行為...

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

Day 15 - Local Storage

任務目標 製作一個待辦清單,該清單所儲存的待辦事項即使網頁關掉再重開,記錄仍是保存的。 作法 一個簡單的待辦清單架構如下 <div class=&quot...

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

Day 16 - Mouse Move Shadow

緣起 還記得 Dudi 嗎? 在 Day 12 , Dudi 始終沒有接收到來自家鄉的老公的回應,為此她倍感消沈,每日借酒澆愁,好不愉快。隨著酗酒的日子長了,...

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

Day 17 - Sort Without Articles

任務目標 今天要來分類歌單!首先有一串存在陣列中的歌單,我們希望將歌單不考慮 "A" 、 "The" 、 "...

2018-01-05 ‧ 由 Arel 分享
DAY 18

Day 18 - Adding Up Time With Reduce

緣起 我們的好朋友,喧猴,有收藏影片跟分享影片的習慣。日積月累下來,喧猴也在自己的網頁上張貼了許多的影片。今天,喧猴心血來潮想要清點一下他所搜集的影片總時間長度...

2018-01-06 ‧ 由 Arel 分享
DAY 19

Day 19 - Webcam Fun - Part I - Take a Photo from Webcam

任務目標 擷取視訊鏡頭得到的影片,實現按鍵快照、預覽照片及下載存檔。 作法 首先是HTML檔的架構,程式碼如下: <!--拍照鈕--> <di...

2018-01-07 ‧ 由 Arel 分享
DAY 20

Day 20 - Webcam Fun - Part II - Pixel Manipulation

任務目標 接續昨天,這次要對擷取下來的影像做畫素操控,讓影像實現灰階、負片、左右翻轉、鏡像等各種光怪陸離的效果!像這樣。 作法 前情提要,昨天我們已經將視訊鏡頭...

2018-01-08 ‧ 由 Arel 分享