JS30是加拿大工程師Wes Bos所建立一系列30天挑戰課程,本次決定跟隨挑戰此30個練習以此深入培養JS實作能力。
最後會改良練習做出一個可用鍵盤控制的網頁版Drum Pads。
關於Drum Pads:
Drum Pads是現在非常流行的新形態製造、演奏音樂的工具,即使沒有音樂基礎,不會任何樂器,也能夠透過內建的sample,手指的敲打,去完成一段音樂,而且有絢麗的燈光效果,看起來十分酷炫,現在的手機、平板也有出相關的APP,不需要大費周章,即能享受演奏、創造音樂的樂趣呢!
[程式碼&DEMO] [HackMD完整筆記] 目標 初始是一個checkbox,改成使用Shift +左鍵來進行連續區間選取。 步驟流程 S...
[程式碼&DEMO] [HackMD完整筆記] 目標 1.使用HTML5的video tag做出各種播放器功能 滑動調節音量以及播放速度 按鈕...
[程式碼&DEMO] [HackMD完整筆記] 目標 當在頁面輸入了完整的“密碼”(一串預先定義好的字串)後,會顯示Cornify特效。 步驟流...
[程式碼&DEMO] [HackMD完整筆記] 目標 滾動視窗到定點時,圖片從兩側滑入;圖片位置離開可見區域時,圖片向兩側滑出。 步驟流程 S...
[程式碼&DEMO] [HackMD完整筆記] 目標 JavaScript中陣列與物件的引用(refrence)及複製(Copying)。 步驟...
[程式碼&DEMO] [HackMD完整筆記] 目標 透過localstorage去進行一個小菜單的資料增加和刪減功能。 步驟流程 STEP1...
[程式碼&DEMO] [HackMD完整筆記] 目標 依據使用者目前的鼠標位置來控制文字陰影的位置。 步驟流程 STEP1 變數 const...
[程式碼&DEMO] [HackMD完整筆記] 目標 如何將原陣列在去除部分文字(前綴詞The/A/An)後再重新進行排序。 步驟流程 STE...
[程式碼&DEMO] [HackMD完整筆記] 目標 用arr.reduce()和arr.map()方法去累加所有時間值,並進行時間格式轉換。...
[程式碼&DEMO] [HackMD完整筆記] 目標 驅動webcam來紀錄影像資訊,再用cavas達成拍照與濾鏡效果。 步驟流程 預設的配置...