iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads 系列

JS30是加拿大工程師Wes Bos所建立一系列30天挑戰課程,本次決定跟隨挑戰此30個練習以此深入培養JS實作能力。
最後會改良練習做出一個可用鍵盤控制的網頁版Drum Pads。
關於Drum Pads:
Drum Pads是現在非常流行的新形態製造、演奏音樂的工具,即使沒有音樂基礎,不會任何樂器,也能夠透過內建的sample,手指的敲打,去完成一段音樂,而且有絢麗的燈光效果,看起來十分酷炫,現在的手機、平板也有出相關的APP,不需要大費周章,即能享受演奏、創造音樂的樂趣呢!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 11

[JS30]DAY10 : Hold Shift to Check Multiple Checkboxes

[程式碼&DEMO] [HackMD完整筆記] 目標 初始是一個checkbox,改成使用Shift +左鍵來進行連續區間選取。 步驟流程 S...

2019-09-25 ‧ 由 BROWN 分享
DAY 12

[JS30]DAY11 : Custom HTML5 Video Player

[程式碼&DEMO] [HackMD完整筆記] 目標 1.使用HTML5的video tag做出各種播放器功能 滑動調節音量以及播放速度 按鈕...

2019-09-26 ‧ 由 BROWN 分享
DAY 13

[JS30]DAY12 : Key Sequence Detection (KONAMI CODE)

[程式碼&DEMO] [HackMD完整筆記] 目標 當在頁面輸入了完整的“密碼”(一串預先定義好的字串)後,會顯示Cornify特效。 步驟流...

2019-09-27 ‧ 由 BROWN 分享
DAY 14

[JS30]DAY13 : Slide in on Scroll

[程式碼&DEMO] [HackMD完整筆記] 目標 滾動視窗到定點時,圖片從兩側滑入;圖片位置離開可見區域時,圖片向兩側滑出。 步驟流程 S...

2019-09-28 ‧ 由 BROWN 分享
DAY 15

[ JS30]DAY14 : JavaScript References VS Copying

[程式碼&DEMO] [HackMD完整筆記] 目標 JavaScript中陣列與物件的引用(refrence)及複製(Copying)。 步驟...

2019-09-29 ‧ 由 BROWN 分享
DAY 16

[JS30]DAY15 : LocalStorage and Event Delegation

[程式碼&DEMO] [HackMD完整筆記] 目標 透過localstorage去進行一個小菜單的資料增加和刪減功能。 步驟流程 STEP1...

2019-09-30 ‧ 由 BROWN 分享
DAY 17

[JS30]DAY16 : Mouse Move Shadow

[程式碼&DEMO] [HackMD完整筆記] 目標 依據使用者目前的鼠標位置來控制文字陰影的位置。 步驟流程 STEP1 變數 const...

2019-10-01 ‧ 由 BROWN 分享
DAY 18

[JS30]DAY17 : Sort Without Articles

[程式碼&DEMO] [HackMD完整筆記] 目標 如何將原陣列在去除部分文字(前綴詞The/A/An)後再重新進行排序。 步驟流程 STE...

2019-10-02 ‧ 由 BROWN 分享
DAY 19

[JS30]DAY18 : Adding Up Times with Reduce

[程式碼&DEMO] [HackMD完整筆記] 目標 用arr.reduce()和arr.map()方法去累加所有時間值,並進行時間格式轉換。...

2019-10-03 ‧ 由 BROWN 分享
DAY 20

[JS30]DAY19 : Webcam Fun

[程式碼&DEMO] [HackMD完整筆記] 目標 驅動webcam來紀錄影像資訊,再用cavas達成拍照與濾鏡效果。 步驟流程 預設的配置...

2019-10-04 ‧ 由 BROWN 分享