iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

火箭通關JS30 系列

主要是在紀錄連續30天實作JS30,對其產生的心得、筆記,透過這樣的方式幫自己的js打下基礎

參賽天數 15 天 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 15

JS30-21 - Geolocation

課程目的: 這次的內容是利用navigator.geolocation API去追蹤用戶的定位,並回傳地理位置、速率等等…作品實做 本次功能實作重點: 選取D...

DAY 15

JS30-22 - Follow Along Link Highlighter

課程目的: 這次的內容是,當我們滑鼠滑動到灰色的區塊,白色滑塊會移動到我們的指定位置作品實做 本次功能實作重點: 選取DOM元素 當滑鼠滑動到相對應的區塊時...

DAY 15

JS30-23 - Speech Synthesis

課程目的: 這次的內容是做出一個語音合成器,像是在google翻譯時可以選擇聽字詞的發音,基於這個功能增加暫停以及加快速度或提升音高的功能作品實做 本次功能實...

DAY 15

JS30-24 - Sticky Nav

課程目的: 這次的內容是當我們滾輪往下滑時,停到導覽列的高度時導覽列會維持在網頁的最頂端作品實做 本次功能實作重點: 選取DOM元素 監聽滑動到nav的高度...

DAY 15

JS30-25 - Event Capture, Propagation, Bubbling and Once

課程目的: 這次的內容是了解冒泡事件以及capture、bubble和once這三個方法作品實做 本次功能實作重點: 了解HTML結構 監聽事件以及了解cap...

DAY 15

JS30-26 - Stripe Follow Along Nav

課程目的: 這次的內容是當滑鼠移動到對應的標籤,會淡入資訊卡作品實做 本次功能實作重點: 監聽dom元素 handleEnter函式邏輯 leaveEnte...

DAY 15

JS30-27 - Click and Drag

課程目的: 這次的內容是滑鼠控制卷軸拖移作品實做 本次功能實作重點: 抓取Dom元素以及監聽 點擊時觸發特效 滑鼠移動時卷軸滾動 停下時取消特效 抓取Do...

DAY 15

JS30-28 - Video Speed Controller

課程目的: 這次的內容是做出右邊的速度調功能去調整影片的速度作品實做 本次功能實作重點: 選取Dom元素以及監聽 控制影片速度功能 選取Dom元素以及監聽...

DAY 15

JS30-29 - Countdown Timer

課程目的: 這次的內容是製作一個網頁計時器,並且顯示結束時的時間作品實做 本次功能實作重點: 抓取DOM元素以及監聽 啟動計時器 倒數顯示在頁面上 頁面顯示...

DAY 15

JS30-30-Whack A Mole

課程目的: 這次的內容為製作一個打地鼠遊戲作品實做 本次功能實作重點: 抓取DOM以及初始設定 開始遊戲 地鼠跳出時點擊加分 地鼠隨機跳出邏輯 抓取DOM...