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

0 Like 0 留言 195 瀏覽

鐵人賽 JavaScript

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

技術【Day31】30 - Whack A Mole

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

Hazel ‧ 2024-08-31

0 Like 0 留言 262 瀏覽

鐵人賽 JavaScript DAY 30

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

技術【Day30】29 - Countdown Timer

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

Hazel ‧ 2024-08-30

0 Like 0 留言 140 瀏覽

鐵人賽 JavaScript DAY 29

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

技術【Day29】28 - Video Speed Controller

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

Hazel ‧ 2024-08-29

0 Like 0 留言 171 瀏覽

鐵人賽 JavaScript DAY 28

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

技術【Day28】27 - Click and Drag

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

Hazel ‧ 2024-08-28

0 Like 0 留言 168 瀏覽

鐵人賽 JavaScript DAY 27

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

技術【Day27】26 - Stripe Follow Along

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

Hazel ‧ 2024-08-27

0 Like 0 留言 183 瀏覽

鐵人賽 JavaScript DAY 25

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

技術【Day25】24 - Sticky Nav

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

Hazel ‧ 2024-08-25

0 Like 0 留言 169 瀏覽

鐵人賽 JavaScript DAY 24

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

技術【Day24】23 - Speech Synthesis

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

Hazel ‧ 2024-08-24

0 Like 0 留言 144 瀏覽

鐵人賽 JavaScript DAY 23

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

技術【Day23】22 - Follow Along Link Highlighter

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

Hazel ‧ 2024-08-23

0 Like 0 留言 193 瀏覽

鐵人賽 JavaScript DAY 22

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

技術 Day22】21 - Geolocation

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

Hazel ‧ 2024-08-22

0 Like 0 留言 175 瀏覽

鐵人賽 JavaScript DAY 21

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

技術【Day21】20 - Speech Detection

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

Hazel ‧ 2024-08-21

0 Like 0 留言 185 瀏覽

鐵人賽 JavaScript DAY 20

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

技術【Day20】19 - Webcam Fun

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

Hazel ‧ 2024-08-20

0 Like 0 留言 172 瀏覽

鐵人賽 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 留言 192 瀏覽

鐵人賽 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 留言 232 瀏覽

鐵人賽 JavaScript DAY 17

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

技術【Day17】16 - Mouse Move Shadow

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

Hazel ‧ 2024-08-17

0 Like 0 留言 197 瀏覽

鐵人賽 JavaScript DAY 16

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

技術【Day16】15 - LocalStorage

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

Hazel ‧ 2024-08-16

0 Like 0 留言 264 瀏覽

鐵人賽 JavaScript DAY 14

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

技術【Day14】13 - Slide in on Scroll

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

Hazel ‧ 2024-08-14

0 Like 0 留言 240 瀏覽

鐵人賽 JavaScript DAY 13

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

技術【Day13】12 - Key Sequence Detection

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

Hazel ‧ 2024-08-13

0 Like 0 留言 204 瀏覽

鐵人賽 JavaScript DAY 12

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

技術【Day12】11 - Custom Video Player

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

Hazel ‧ 2024-08-12

0 Like 0 留言 257 瀏覽

鐵人賽 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 留言 216 瀏覽

鐵人賽 JavaScript DAY 10

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

技術【Day10】09 - Dev Tools Domination

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

Hazel ‧ 2024-08-10

0 Like 0 留言 290 瀏覽

鐵人賽 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 留言 275 瀏覽

鐵人賽 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 留言 332 瀏覽

鐵人賽 JavaScript DAY 7

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

技術【Day07】06 - Type Ahead

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

Hazel ‧ 2024-08-07

0 Like 0 留言 274 瀏覽

鐵人賽 JavaScript DAY 6

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

技術【Day06】05 - Flex Panel Gallery

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

Hazel ‧ 2024-08-06

0 Like 0 留言 250 瀏覽

鐵人賽 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 留言 323 瀏覽

鐵人賽 JavaScript DAY 4

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

技術【Day04】03 - CSS Variables

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

Hazel ‧ 2024-08-04

0 Like 0 留言 357 瀏覽

鐵人賽 JavaScript DAY 3

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

技術【Day03】02 - JS and CSS Clock

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

Hazel ‧ 2024-08-03

0 Like 0 留言 335 瀏覽

鐵人賽 JavaScript DAY 2

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

技術【Day02】01 - JavaScript Drum Kit

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

Hazel ‧ 2024-08-02

0 Like 0 留言 492 瀏覽

鐵人賽 JavaScript DAY 1

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

技術【Day01】- 前言

前言為什麼要寫這個？在學習的時候，老師有建議懂一點 JS 的人可以練這個，不要跟其他同學練習簡單的東西。那時候我就把它收藏起來了，想說之後也要練習！之前...

Hazel ‧ 2024-08-01

0 Like 0 留言 454 瀏覽

鐵人賽 AI & Data DAY 25

戀 AI ing - 我與機器學習的邂逅系列第 25 篇

技術【Day 25】《實作》搭建簡單線性回歸模型

前言前面理論的東西講了這麼多，大家想必很想動手實作了吧，今天我們就要來著手搭建簡單線性回歸模型，我們要能夠輸入年資 ( 特徵 ) 並讓這個模型根據輸入的資訊去...

許皓翔 ‧ 2023-10-10 ‧團隊最強資工大電神

技術 【Day31】30 - Whack A Mole

技術 【Day30】29 - Countdown Timer

技術 【Day29】28 - Video Speed Controller

技術 【Day28】27 - Click and Drag

技術 【Day27】26 - Stripe Follow Along

技術 【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

技術 【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

技術 【Day01】- 前言

技術 【Day 25】《實作》搭建簡單線性回歸模型

標記使用者