第九屆

web
新手也能懂的JS30
王郁翔

系列文章

DAY 11

JS30-Day11-Custom Video Player

Day11-課題內容 今天的課題中,我們將來了解 video 物件,並透過其相關方法,來客製化一個影片播放器。[1]實作範例 Video物件 在HTML5推出之...

DAY 12

JS30-Day12-Key Sequence Detection

Day12-課題內容 邁入JS30的第12篇,在今天的題目中,當我們輸入的字元與的隱藏密碼一致時,便會打開隱藏在頁面中的彩蛋![1]實作連結-大家可以嘗試在上面...

DAY 13

JS30-Day13-Slide in on Scroll

JS30-Day13 在今天的題目當中,我們將學習如何讓畫面中的圖片,在滾動頁面的同時,產生進入、離開的效果。從作者給的範例中,我們可以看到當圖片往上出現在畫面...

DAY 14

JS30-Day14-JS Reference VS Copy

Day14-課題內容 在前幾天的課題當中,我們開始接觸到資料的使用,在今天的課題當中,我們要來認識 javascript 中各種資料型別,以及其在使用上要注意的...

DAY 15

JS30-Day15-LocalStorage

Day15-課題內容 今天我們要將資料從頁面中的程式碼儲存到Web瀏覽器的儲存空間當中。如此一來,本來存入程式碼當中的資料,就不會因重新整理頁面或者關閉瀏覽器而...

DAY 16

JS30-Day16-Mouse Move Shadow

Day16-課題內容 轉眼間我們的 JS30 之路已經完成一半了!今天要來實作一個頁面的影分身之術。在頁面剛開啟時,只有中間一個字串'影分身之術!!',但是當我...

DAY 17

JS30-Day17-Sort Without Articles

Day17-課題內容 進入JS30的第十七天,今天要將陣列中的資料做排序的動作。[1] 進入JS30-Day17 在草稿中作者已經給了一個陣列內容,我們的目的是...

DAY 18

JS30-Day18-Add Up Times with Reduce

Day18-課題內容 進入JS30的第十八天,今天的課題中,我們也要來處理陣列中的資料,而這次處理的資料對象為時間,我們要將每個元素的時間加總起來。[1] 進入...

DAY 19

JS30-Day19-Webcam Fun

Day14-課題內容 在今天的課題當中,我們要將鏡頭攝影機所取得的影像資料,轉到 canvas 的畫布上,再將 canvas 上的像素資料透過一些方法,將我們的...

DAY 20

JS30-Day20-Speech Detection

Day20-課題內容 在昨天的課題中我們玩了一下視訊鏡頭,今天要來玩一下麥克風聲控![1]實作連結 Speech Recognition 透過 Web Spee...