iT邦幫忙

鐵人檔案

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

森林系工程師之開始工作才學JS?! 系列

以JavaScript 30挑戰為主軸,可能會補充其他的東西。

DAY 10

Day10 -- Hold Shift to Check Multiple Checkboxes

目標 今天要來做的是按住shift鍵來選取多個Checkboxe Step1 const checkboxes = document.querySelector...

2020-09-23 ‧ 由 lukechu 分享
DAY 11

Day11 -- Custom HTML5 Video Player

目標 今天要來學習如何自制一個影片播放器 Step1 暫停/播放影片 //get elements const player = document.queryS...

2020-09-24 ‧ 由 lukechu 分享
DAY 12

Day12 -- Key Sequence Detection

目標 今天要做的是偵測輸入順序,這就像是以前的街機或是掌上遊戲機(GBA, GBC)的密技一樣,可以用來做有趣的小彩蛋 const pressed = [];...

2020-09-25 ‧ 由 lukechu 分享
DAY 13

Day13 -- Slide in on Scroll

目標 今天要做的是捲動畫面到一定位置的時候顯示圖片,當圖片離開畫面時消失 Step1 function debounce(func, wait = 20, im...

2020-09-26 ‧ 由 lukechu 分享
DAY 14

Day14 -- JS Reference VS Copy

目標 今天要來學習的是JS中的參數傳遞方式 當變數的值是原生型別 (Primitive) 時,Pass by value Primitive String N...

2020-09-27 ‧ 由 lukechu 分享
DAY 15

Day15 -- Local Storage

目標 今天是 LocalStorage and Event Delegation 的上篇 我們要來學習的是Local Storage Step1 const a...

2020-09-28 ‧ 由 lukechu 分享
DAY 16

Day16 -- Event Delegation

目標 今天要來學習的是Event Delegation 事件委派,Event Delegation(事件委派)是一種受惠於 Event Bubbling 而能減...

2020-09-29 ‧ 由 lukechu 分享
DAY 17

Day17 -- Text Shadow Mouse Move Effect

目標 今天要來做的是一個酷炫的特效,當滑鼠移動的時候,字的陰影也會跟著移動 Step1 第一步要做的是抓取滑鼠所在的位置 const hero = docume...

2020-09-30 ‧ 由 lukechu 分享
DAY 18

Day18 -- Sort Without Articles

目標 Articles是英文中的冠詞,包含the, a, an,冠詞的存在會影響字串在列表中的排序,所以今天要來學習的是,不將冠詞加入排序 範例資料 const...

2020-10-01 ‧ 由 lukechu 分享
DAY 19

Day19 -- Tally String Times with Reduce

目標 今天要來做的是用reduce()將時間數據加總 Step1 今天使用的資料來源是原作著提供的列表,時間資料在列表的data-time屬性 const ti...

2020-10-02 ‧ 由 lukechu 分享