iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 169 瀏覽

鐵人賽 JavaScript

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 31 篇

技術【Day31】30 - Whack A Mole

主題實作一個打地鼠的遊戲，有計分/計時功能。成果完整程式碼Demo效果實作重點 Javascript 取得元素設定隨機時間(第28天的範圍公...

Hazel ‧ 2024-08-31

0 Like 0 留言 220 瀏覽

鐵人賽 JavaScript DAY 30

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 30 篇

技術【Day30】29 - Countdown Timer

主題實作一個倒數計時器。成果完整程式碼Demo效果實作重點 Javascript 取得元素倒數計時器的數字顯示預計結束時間的顯示所有的按鈕...

Hazel ‧ 2024-08-30

0 Like 0 留言 127 瀏覽

鐵人賽 JavaScript DAY 29

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 29 篇

技術【Day29】28 - Video Speed Controller

主題實作一個影片播放器的調整播放速度 bar。成果完整程式碼Demo效果實作重點 Javascript 取得元素：速度條外框、速度條內框、音樂...

Hazel ‧ 2024-08-29

0 Like 0 留言 150 瀏覽

鐵人賽 JavaScript DAY 28

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 28 篇

技術【Day28】27 - Click and Drag

主題實作一個隨著滑鼠點擊左右移動內容的效果。成果完整程式碼Demo效果實作重點 CSS 可以把 overflow 改成 hidden 才不會漏出卷軸...

Hazel ‧ 2024-08-28

0 Like 0 留言 138 瀏覽

鐵人賽 JavaScript DAY 27

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 27 篇

技術【Day27】26 - Stripe Follow Along

主題實作一個隨著滑鼠停留後會下拉的選單列效果。成果完整程式碼Demo效果實作重點可以思考一下，動畫出現的時機。 CSS 先製作出樣式滑鼠停留後會...

Hazel ‧ 2024-08-27

0 Like 0 留言 161 瀏覽

鐵人賽 JavaScript DAY 26

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 26 篇

技術【Day26】25 - Event Capture, Propagation, Bubbling and Once

主題了解 addEventListener 中的第三個參數 Event Bubbling(冒泡事件), Event Capture(捕捉事件), Propa...

Hazel ‧ 2024-08-26

0 Like 0 留言 168 瀏覽

鐵人賽 JavaScript DAY 25

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 25 篇

技術【Day25】24 - Sticky Nav

主題實作一個置頂的 Navbar。成果完整程式碼Demo效果實作重點 CSS 利用 fixed 製作一個會黏在頂部的 nav .fixed-nav...

Hazel ‧ 2024-08-25

0 Like 0 留言 152 瀏覽

鐵人賽 JavaScript DAY 24

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 24 篇

技術【Day24】23 - Speech Synthesis

主題實作一個文字輸入語音輸出的工具，有播放、暫停、語速、音量調整功能。成果完整程式碼Demo效果實作重點 Javascript 可以搭配文件 Sp...

Hazel ‧ 2024-08-24

0 Like 0 留言 135 瀏覽

鐵人賽 JavaScript DAY 23

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 23 篇

技術【Day23】22 - Follow Along Link Highlighter

主題實作一個跟隨滑鼠移動的 HightLight 效果。成果完整程式碼Demo效果實作重點 Javascript 主要使用 getBoundingCl...

Hazel ‧ 2024-08-23

0 Like 0 留言 176 瀏覽

鐵人賽 JavaScript DAY 22

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 22 篇

技術 Day22】21 - Geolocation

主題實作一個顯示當前方位與速度的工具。成果完整程式碼Demo效果實作重點 Javascript 可以搭配文件 (MDN)這個題目在手機上比較好看到...

Hazel ‧ 2024-08-22

0 Like 0 留言 163 瀏覽

鐵人賽 JavaScript DAY 21

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 21 篇

技術【Day21】20 - Speech Detection

主題實作一個語音輸入文字輸出的工具。成果完整程式碼Demo效果實作重點 Javascript 可以搭配MDN 安裝/啟動利用npm來安裝：np...

Hazel ‧ 2024-08-21

0 Like 0 留言 169 瀏覽

鐵人賽 JavaScript DAY 20

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 20 篇

技術【Day20】19 - Webcam Fun

主題實作一個 Webcam ，有拍照、下載、濾鏡的效果成果完整程式碼Demo效果實作重點 Javascript 在驅動 webcam 前需要有一個...

Hazel ‧ 2024-08-20

0 Like 0 留言 153 瀏覽

鐵人賽 JavaScript DAY 19

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 19 篇

技術【Day19】18 - Adding Up Times with Reduce

主題利用取得播放清單總秒數來複習陣列方法 reduce, map 的使用。成果完整程式碼Demo效果實作重點 Javascript 取得所有的 l...

Hazel ‧ 2024-08-19

0 Like 0 留言 181 瀏覽

鐵人賽 JavaScript DAY 18

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 18 篇

技術【Day18】17 - Sort Without Articles

主題利用編排文章排序來複習陣列方法sort, map, join, replace, trim 搭配正則的使用。成果完整程式碼Demo效果實作重點 J...

Hazel ‧ 2024-08-18

0 Like 0 留言 219 瀏覽

鐵人賽 JavaScript DAY 17

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 17 篇

技術【Day17】16 - Mouse Move Shadow

主題實作一個滑鼠移動時，產生不同陰影的效果成果完整程式碼Demo效果實作重點 Javascript 先了解基本概念 offsetX , of...

Hazel ‧ 2024-08-17

0 Like 0 留言 179 瀏覽

鐵人賽 JavaScript DAY 16

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 16 篇

技術【Day16】15 - LocalStorage

主題實作一個 LocalStorage 的紀錄菜單功能成果完整程式碼Demo效果實作重點 Javascript 先了解 LocalStorage(...

Hazel ‧ 2024-08-16

0 Like 0 留言 197 瀏覽

鐵人賽 JavaScript DAY 15

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 15 篇

技術【Day15】14 - JavaScript References VS Copying

主題介紹 JS 賦值時，reference(參考、傳址) 與 copying(拷貝、傳值)。成果完整程式碼Demo效果實作重點 Javascript 可...

Hazel ‧ 2024-08-15

0 Like 0 留言 250 瀏覽

鐵人賽 JavaScript DAY 14

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 14 篇

技術【Day14】13 - Slide in on Scroll

主題實作一個當畫面滾動到圖片區域時圖片以動畫方式跑出成果完整程式碼Demo效果實作重點學習 window 事件 Javascript 先了解 w...

Hazel ‧ 2024-08-14

0 Like 0 留言 202 瀏覽

鐵人賽 JavaScript DAY 13

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 13 篇

技術【Day13】12 - Key Sequence Detection

主題使用 Cornify.js 製作簡單的彩蛋效果。成果完整程式碼Demo效果實作重點 Javascript 會使用 cornify.js ，放到...

Hazel ‧ 2024-08-13

0 Like 0 留言 183 瀏覽

鐵人賽 JavaScript DAY 12

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 12 篇

技術【Day12】11 - Custom Video Player

主題利用 <video> 標籤，實作影片播放器的基礎功能成果完整程式碼Demo效果實作重點 <video> (MDN) 對照文...

Hazel ‧ 2024-08-12

0 Like 0 留言 235 瀏覽

鐵人賽 JavaScript DAY 11

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 11 篇

技術【Day11】10 - Hold Shift and Check Checkboxes

主題實作出按住 Shift 點擊 check list ，達到連續選取的效果成果完整程式碼Demo效果實作重點 Javascript 類陣列轉陣列...

Hazel ‧ 2024-08-11

0 Like 0 留言 187 瀏覽

鐵人賽 JavaScript DAY 10

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 10 篇

技術【Day10】09 - Dev Tools Domination

主題介紹 dev tool，了解 javascript 裡 console 的實用功能。成果完整程式碼Demo效果實作重點 Javascript...

Hazel ‧ 2024-08-10

0 Like 0 留言 268 瀏覽

鐵人賽 JavaScript DAY 9

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 9 篇

技術【Day09】08 - Fun with HTML5 Canvas

主題利用 HTML 的canvas 標籤搭配 JS 做出畫布的效果。實現畫筆顏色(hsl)和粗細變化。成果完整程式碼Demo效果實作重點 Javasc...

Hazel ‧ 2024-08-09

0 Like 0 留言 237 瀏覽

鐵人賽 JavaScript DAY 8

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 8 篇

技術【Day08】07 - Array Cardio Day 2

主題練習 JavaScript Array 的方法，可以對照 MDN 文件：Array.prototype.some() 、 Array.prototype...

Hazel ‧ 2024-08-08

0 Like 0 留言 289 瀏覽

鐵人賽 JavaScript DAY 7

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 7 篇

技術【Day07】06 - Type Ahead

主題利用 Fetch API、非同步載入的方式，並配合正規表達式處理字串，實現使用者輸入的城市名稱時動態地查找相對應的資料。成果完整程式碼Demo效果...

Hazel ‧ 2024-08-07

0 Like 0 留言 232 瀏覽

鐵人賽 JavaScript DAY 6

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 6 篇

技術【Day06】05 - Flex Panel Gallery

主題實作一個圖片展開的動畫成果完整程式碼Demo效果實作重點 CSS 先用把畫面調整出來調整圖片：flex 、flex 佔比為 1 文字置中：...

Hazel ‧ 2024-08-06

0 Like 0 留言 227 瀏覽

鐵人賽 JavaScript DAY 5

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 5 篇

技術【Day05】04 - Array Cardio Day 1

主題練習 JavaScript Array 的方法，可以對照 MDN 文件： Array.prototype.filter() 、 Array.protot...

Hazel ‧ 2024-08-05

0 Like 0 留言 273 瀏覽

鐵人賽 JavaScript DAY 4

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 4 篇

技術【Day04】03 - CSS Variables

主題利用 JS 去改變 CSS 變數的值成果完整程式碼Demo效果實作重點 CSS 偽類：:root 表示 <html> (MDN)元素，...

Hazel ‧ 2024-08-04

0 Like 0 留言 316 瀏覽

鐵人賽 JavaScript DAY 3

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 3 篇

技術【Day03】02 - JS and CSS Clock

主題實作一個小時鐘。成果完整程式碼Demo效果實作重點 CSS 指針樣式先做完調整時間起始位置在 0 的位置( 後面比較好算數學 ) 調整每個針...

Hazel ‧ 2024-08-03

0 Like 0 留言 320 瀏覽

鐵人賽 JavaScript DAY 2

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 2 篇

技術【Day02】01 - JavaScript Drum Kit

主題利用鍵盤按鍵去觸發畫面上的呈現與音效。成果完整程式碼Demo效果實作重點 Javascript 鍵盤事件keyboardEvent ：使用 k...

Hazel ‧ 2024-08-02

技術 【Day31】30 - Whack A Mole

技術 【Day30】29 - Countdown Timer

技術 【Day29】28 - Video Speed Controller

技術 【Day28】27 - Click and Drag

技術 【Day27】26 - Stripe Follow Along

技術 【Day26】25 - Event Capture, Propagation, Bubbling and Once

技術 【Day25】24 - Sticky Nav

技術 【Day24】23 - Speech Synthesis

技術 【Day23】22 - Follow Along Link Highlighter

技術 Day22】21 - Geolocation

技術 【Day21】20 - Speech Detection

技術 【Day20】19 - Webcam Fun

技術 【Day19】18 - Adding Up Times with Reduce

技術 【Day18】17 - Sort Without Articles

技術 【Day17】16 - Mouse Move Shadow

技術 【Day16】15 - LocalStorage

技術 【Day15】14 - JavaScript References VS Copying

技術 【Day14】13 - Slide in on Scroll

技術 【Day13】12 - Key Sequence Detection

技術 【Day12】11 - Custom Video Player

技術 【Day11】10 - Hold Shift and Check Checkboxes

技術 【Day10】09 - Dev Tools Domination

技術 【Day09】08 - Fun with HTML5 Canvas

技術 【Day08】07 - Array Cardio Day 2

技術 【Day07】06 - Type Ahead

技術 【Day06】05 - Flex Panel Gallery

技術 【Day05】04 - Array Cardio Day 1

技術 【Day04】03 - CSS Variables

技術 【Day03】02 - JS and CSS Clock

技術 【Day02】01 - JavaScript Drum Kit

標記使用者