iT邦幫忙

javascript 30相關文章
共有 94 則文章
0 Like 0 留言 320 瀏覽
鐵人賽 JavaScript DAY 3
AI 時代，基礎要有：JavaScript30 打下紮實基礎 系列 第 3 篇

技術 【Day03】02 - JS and CSS Clock

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

Hazel ‧ 2024-08-03
2 Like 0 留言 387 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 3
菜雞學習JavaScript的30日讀書分享 系列 第 3 篇

技術 菜雞學習JavaScript的30日讀書分享 【Day 3】變數

前言 ====================本系列文章沒有什麼高深的理論========================================純粹...

rdnnn ‧ 2024-08-03
1 Like 0 留言 357 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 2
菜雞學習JavaScript的30日讀書分享 系列 第 2 篇

技術 菜雞學習JavaScript的30日讀書分享 【Day 2】規範

前言 ====================本系列文章沒有什麼高深的理論========================================純粹...

rdnnn ‧ 2024-08-02
2 Like 0 留言 587 瀏覽
鐵人賽 佛心分享-IT 人自學之術 DAY 1
菜雞學習JavaScript的30日讀書分享 系列 第 1 篇

技術 菜雞學習JavaScript的30日讀書分享【Day 1】簡史

前言 ====================本系列文章沒有什麼高深的理論========================================純粹...

rdnnn ‧ 2024-08-01
0 Like 1 留言 281 瀏覽
鐵人賽 Modern Web DAY 30
JS30 x 鐵人30 x MDN doc 系列 第 30 篇

技術 [Day30] - Whack A Mole(JS30 x 鐵人 30 x MDN)

做一個打地鼠遊戲網站，按下開始後可以開啟遊戲(約 10 秒)、有計分功能、地鼠會隨機出現，腳本作弊點擊不計分 週期執行：setInterval() globa...

yang817 ‧ 2023-10-15 ‧團隊好想工作室 v7.0
0 Like 0 留言 340 瀏覽
鐵人賽 Modern Web DAY 29
JS30 x 鐵人30 x MDN doc 系列 第 29 篇

技術 [Day29] - Countdown Timer(JS30 x 鐵人 30 x MDN)

做一個網頁倒數裝置，設有 5 種常用快速選項，也可以讓使用者自行輸入，並會將倒數時間顯示於畫面及分頁標籤上 日期物件：Date - JavaScript 週...

yang817 ‧ 2023-10-14 ‧團隊好想工作室 v7.0
0 Like 0 留言 227 瀏覽
鐵人賽 Modern Web DAY 28
JS30 x 鐵人30 x MDN doc 系列 第 28 篇

技術 [Day28] - Video Speed Controller(JS30 x 鐵人 30 x MDN)

自定義一個影片播放速率控制器 事件（滑鼠移動）：Element: mousemove event 影片元素速率：HTMLMediaElement: play...

yang817 ‧ 2023-10-13 ‧團隊好想工作室 v7.0
0 Like 0 留言 266 瀏覽
鐵人賽 Modern Web DAY 27
JS30 x 鐵人30 x MDN doc 系列 第 27 篇

技術 [Day27] - Click and Drag(JS30 x 鐵人 30 x MDN)

做一個區塊可以讓使用者左右拖曳顯示的項目 新增事件監聽：EventTarget: addEventListener() method 移除事件監聽器：rem...

yang817 ‧ 2023-10-12 ‧團隊好想工作室 v7.0
0 Like 0 留言 259 瀏覽
鐵人賽 Modern Web DAY 26
JS30 x 鐵人30 x MDN doc 系列 第 26 篇

技術 [Day26] - Stripe Follow Along Nav(JS30 x 鐵人 30 x MDN)

做一個 nav-bar 當使用者 hover 時會展開下拉式清單，搭配動畫緩進緩出 ClassList 新增指定項：DOMTokenList: add()...

yang817 ‧ 2023-10-11 ‧團隊好想工作室 v7.0
0 Like 0 留言 348 瀏覽
鐵人賽 Modern Web DAY 25
JS30 x 鐵人30 x MDN doc 系列 第 25 篇

技術 [Day25] - Event Capture, Propagation, Bubbling and Once(JS30 x 鐵人 30 x MDN)

認識事件捕獲、冒泡、傳播、單次事件 事件介紹：Introduction to events 事件監聽器：EventTarget: addEventListe...

yang817 ‧ 2023-10-10 ‧團隊好想工作室 v7.0
0 Like 0 留言 241 瀏覽
鐵人賽 Modern Web DAY 24
JS30 x 鐵人30 x MDN doc 系列 第 24 篇

技術 [Day24] - Sticky Nav(JS30 x 鐵人 30 x MDN)

將 nav-bar 固定於網頁上方 黏貼定位：position:sticky 固定定位：position:fixed 要 nav-bar 在視窗滑動超...

yang817 ‧ 2023-10-09 ‧團隊好想工作室 v7.0
0 Like 0 留言 310 瀏覽
鐵人賽 Modern Web DAY 23
JS30 x 鐵人30 x MDN doc 系列 第 23 篇

技術 [Day23] - Speech Synthesis(JS30 x 鐵人 30 x MDN)

做一個語音閱讀器，可播放使用者輸入的訊息 語音合成 API：SpeechSynthesis - Web APIs 語音改變事件：SpeechSynthesi...

yang817 ‧ 2023-10-08 ‧團隊好想工作室 v7.0
0 Like 0 留言 285 瀏覽
鐵人賽 Modern Web DAY 22
JS30 x 鐵人30 x MDN doc 系列 第 22 篇

技術 [Day22] - Follow Along Link Highlighter(JS30 x 鐵人 30 x MDN)

為網頁所有連結做一個會偵測使用者鼠標位置並移動的 highlight 滑鼠事件：Element: mouseenter event 元素上邊緣的偏移量：HT...

yang817 ‧ 2023-10-07 ‧團隊好想工作室 v7.0
0 Like 0 留言 264 瀏覽
鐵人賽 Modern Web DAY 21
JS30 x 鐵人30 x MDN doc 系列 第 21 篇

技術 [Day21] - Geolocation(JS30 x 鐵人 30 x MDN)

做一個網頁羅盤，監聽使用者位置資訊（使用方位及時速改變羅盤） Web 導航器 API：Navigator - Web APIs | MDN 取得地理定位：N...

yang817 ‧ 2023-10-06 ‧團隊好想工作室 v7.0
0 Like 0 留言 420 瀏覽
鐵人賽 Modern Web DAY 20
JS30 x 鐵人30 x MDN doc 系列 第 20 篇

技術 [Day20] - Speech Detection(JS30 x 鐵人 30 x MDN)

做一個網頁語音輸入功能，可將語音輸入的英文自動變成文字 語音識別 API：SpeechRecognition - Web APIs 語音識別事件(返回結果)...

yang817 ‧ 2023-10-05 ‧團隊好想工作室 v7.0
0 Like 0 留言 348 瀏覽
鐵人賽 Modern Web DAY 19
JS30 x 鐵人30 x MDN doc 系列 第 19 篇

技術 [Day19] - Webcam Fun(JS30 x 鐵人 30 x MDN)

做一個網頁攝像機，可套用濾鏡調整濾鏡色彩並提供下載功能 Web 導航器 API：Navigator - Web APIs | MDN 訪問媒體裝置：Navi...

yang817 ‧ 2023-10-04 ‧團隊好想工作室 v7.0
0 Like 0 留言 239 瀏覽
鐵人賽 Modern Web DAY 18
JS30 x 鐵人30 x MDN doc 系列 第 18 篇

技術 [Day18] - Adding Up Times with Reduce(JS30 x 鐵人 30 x MDN)

透過 Array.reduce()算出影片總時間並印在 console 中 字串分割：String.prototype.split() 陣列映射：Array...

yang817 ‧ 2023-10-03 ‧團隊好想工作室 v7.0
0 Like 0 留言 263 瀏覽
鐵人賽 Modern Web DAY 17
JS30 x 鐵人30 x MDN doc 系列 第 17 篇

技術 [Day17] - Sort Without Articles(JS30 x 鐵人 30 x MDN)

將資料去掉 The/A/An 冠詞開頭後進行排序，再將原資料照排序結果渲染至畫面上 陣列排序：Array.prototype.sort() 正規表達式：Re...

yang817 ‧ 2023-10-02 ‧團隊好想工作室 v7.0
0 Like 0 留言 234 瀏覽
鐵人賽 Modern Web DAY 16
JS30 x 鐵人30 x MDN doc 系列 第 16 篇

技術 [Day16] - Mouse Move Shadow(JS30 x 鐵人 30 x MDN)

透過 JS 將文字做出 4 層陰影，並隨著鼠標位置移動 文字陰影：text-shadow - CSS 元素內容可編輯：contenteditable...

yang817 ‧ 2023-10-01 ‧團隊好想工作室 v7.0
0 Like 0 留言 184 瀏覽
鐵人賽 Modern Web DAY 15
JS30 x 鐵人30 x MDN doc 系列 第 15 篇

技術 [Day15] - LocalStorage(JS30 x 鐵人 30 x MDN)

透過 Localstorage 儲存項目，新增、狀態切換、刪除(不在原題內) 本地儲存(讀取)：Storage: getItem() method 本地儲存...

yang817 ‧ 2023-09-30 ‧團隊好想工作室 v7.0
0 Like 0 留言 281 瀏覽
鐵人賽 Modern Web DAY 14
JS30 x 鐵人30 x MDN doc 系列 第 14 篇

技術 [Day14] - JavaScript References VS Copying(JS30 x 鐵人 30 x MDN)

了解 javascript 傳值(拷貝)、傳址(參照)、淺拷貝、深拷貝 物件參照：Object reference 淺拷貝:Shallow copy 深拷...

yang817 ‧ 2023-09-29 ‧團隊好想工作室 v7.0
0 Like 0 留言 288 瀏覽
鐵人賽 Modern Web DAY 13
JS30 x 鐵人30 x MDN doc 系列 第 13 篇

技術 [Day13] - Slide in on Scroll(JS30 x 鐵人 30 x MDN)

實作頁面滾動式視差設計 滾動事件：Document: scroll event 視窗可視高度Window: innerHeight property 垂直...

yang817 ‧ 2023-09-28 ‧團隊好想工作室 v7.0
0 Like 0 留言 197 瀏覽
鐵人賽 Modern Web DAY 12
JS30 x 鐵人30 x MDN doc 系列 第 12 篇

技術 [Day12] - Key Sequence Detection(JS30 x 鐵人 30 x MDN)

按鍵佇列檢測，當輸入通關密語螢幕上則會出現獨角獸 鍵盤事件-按鍵彈起：Element: keyup event 陣列拼接：Array.prototype.s...

yang817 ‧ 2023-09-27 ‧團隊好想工作室 v7.0
0 Like 0 留言 254 瀏覽
鐵人賽 Modern Web DAY 11
JS30 x 鐵人30 x MDN doc 系列 第 11 篇

技術 [Day11] - Custom Video Player(JS30 x 鐵人 30 x MDN)

來自定義一個影片播放器吧！ 影片嵌入元素：Video Embed element 媒體元素：HTMLMediaElement 影片時間更新事件：HTML...

yang817 ‧ 2023-09-26 ‧團隊好想工作室 v7.0
0 Like 0 留言 267 瀏覽
鐵人賽 Modern Web DAY 10
JS30 x 鐵人30 x MDN doc 系列 第 10 篇

技術 [Day10] - Hold Shift and Check Checkboxes(JS30 x 鐵人 30 x MDN)

實做一個表單，按著 shift 點擊可區間全選/取消功能 滑鼠事件-shift 鍵與否屬性：MouseEvent: shiftKey property 輸入...

yang817 ‧ 2023-09-25 ‧團隊好想工作室 v7.0
0 Like 0 留言 172 瀏覽
鐵人賽 Modern Web DAY 9
JS30 x 鐵人30 x MDN doc 系列 第 9 篇

技術 [Day9] - Dev Tools Domination(JS30 x 鐵人 30 x MDN)

活用 console API 幫助開發除錯 瀏覽器控制台調試：console APIs 不知道大家是不是跟我一樣都用一招console.log()打天下呢...

yang817 ‧ 2023-09-24 ‧團隊好想工作室 v7.0
0 Like 0 留言 312 瀏覽
鐵人賽 Modern Web DAY 8
JS30 x 鐵人30 x MDN doc 系列 第 8 篇

技術 [Day8] - Fun with HTML5 Canvas(JS30 x 鐵人 30 x MDN)

實做一個 Canvas 畫布，會隨著使用者滑鼠軌跡自動變換畫筆顏色及粗度 網頁畫布 API:Canvas API 網頁畫布 2D 渲染接口：CanvasRe...

yang817 ‧ 2023-09-23 ‧團隊好想工作室 v7.0
0 Like 0 留言 296 瀏覽
鐵人賽 Modern Web DAY 7
JS30 x 鐵人30 x MDN doc 系列 第 7 篇

技術 [Day7] - Array Cardio part2(JS30 x 鐵人 30 x MDN)

今天來玩玩 Array method，並印出結果吧-趴兔 陣列判斷(其中之一元素符合)：Array.prototype.some() 陣列判斷(每個元素...

yang817 ‧ 2023-09-22 ‧團隊好想工作室 v7.0
0 Like 0 留言 256 瀏覽
鐵人賽 Modern Web DAY 6
JS30 x 鐵人30 x MDN doc 系列 第 6 篇

技術 [Day6] - Type Ahead(JS30 x 鐵人 30 x MDN)

實作一個網頁可以搜尋美國的城市/州，並將搜尋結果渲染出來並標示匹配字樣 請求資料：Fetch API 請求的回覆：Response 數字格式：In...

yang817 ‧ 2023-09-21 ‧團隊好想工作室 v7.0
0 Like 0 留言 437 瀏覽
鐵人賽 Modern Web DAY 5
JS30 x 鐵人30 x MDN doc 系列 第 5 篇

技術 [Day5] - Flex Panel Gallery(JS30 x 鐵人 30 x MDN)

實做一個圖片畫廊，當使用者點擊圖片時畫面會聚焦那張圖片(圖片佔比增加)，再次點擊會恢復 CSS 彈性盒子排版：CSS flexible box layout...

yang817 ‧ 2023-09-20 ‧團隊好想工作室 v7.0
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙