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

0 Like 0 留言 1941 瀏覽

鐵人賽自我挑戰組 DAY 7

從零開始前端學習筆記(HTML、CSS、JavaScript) 系列第 7 篇

技術 Day 07 CSS <字體屬性>

CSS Fonts(字體) 屬性用於定義字體系列、大小、粗細和文字樣式(ex:斜體) 1.字體系列font-family 屬性定義文本的字體系列 <st...

a0265392 ‧ 2021-09-07

0 Like 0 留言 1554 瀏覽

鐵人賽 Modern Web DAY 6

33歲轉職者的前端筆記系列第 6 篇

技術 33歲轉職者的前端筆記-DAY 6 CSS button 套件

最近的工作專案很常用到 button 按鈕因為小公司的關係沒有設計所以通常要自已想 button 按鈕樣式但沒有設計腦真的很難想要怎麼呈現顏色跟效果今天...

a841722 ‧ 2021-09-06

0 Like 0 留言 3147 瀏覽

鐵人賽自我挑戰組 DAY 6

從零開始前端學習筆記(HTML、CSS、JavaScript) 系列第 6 篇

技術 Day 06 CSS <複合選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器本日將將繼續說明複合選擇器複合選擇器可以更準確更高效的選擇元素(標籤) 是由兩個或多個基礎選擇器透過不同方式組合而...

a0265392 ‧ 2021-09-06

1 Like 0 留言 1901 瀏覽

鐵人賽自我挑戰組 DAY 5

從零開始前端學習筆記(HTML、CSS、JavaScript) 系列第 5 篇

技術 Day 05 CSS <基礎選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器本日將先說明基礎選擇器 DAY6將繼續說明複合選擇器 CSS中的基礎選擇器單個選擇器組成，包含標籤選擇器、類選擇器、i...

a0265392 ‧ 2021-09-05

0 Like 0 留言 1705 瀏覽

鐵人賽 Modern Web DAY 4

33歲轉職者的前端筆記系列第 4 篇

技術 33歲轉職者的前端筆記 DAY 4 固定浮動選單 RWD 寫法

隨著智慧型手機的普及網頁設計也要隨著時代的潮流而寫出適合智慧型手機用戶的網頁今天的筆記是目前最常見的 RWD 應用：固定浮動選單首先先上範例圖：背景雖...

a841722 ‧ 2021-09-04

0 Like 0 留言 1212 瀏覽

鐵人賽自我挑戰組 DAY 4

從零開始前端學習筆記(HTML、CSS、JavaScript) 系列第 4 篇

技術 Day 04 HTML<表單標籤>

表單標籤主要功用是用來收集使用者資料常用情況 : 註冊頁面... 主要由表單域、表單元素、提示文字這三種內容組成以MOMO註冊頁面為範例: 1.表單域...

a0265392 ‧ 2021-09-04

0 Like 0 留言 1020 瀏覽

技術背包系統詳解

//裝備藥水:實現藥水單向(若裝備欄內沒藥水可直接裝備)、雙向置換(若裝備欄內已經有藥水，直接點擊新藥水會進行置換)， var x = document.ge...

tommy44541 ‧ 2021-07-30

2 Like 0 留言 9484 瀏覽

技術如何利用 Gsap ScrollTrigger 做出滾動動畫? Vue 專案載入 ScrollTrigger

最近看了很多滾動動畫，實在讓人驚嘆!!查了背後邏輯發現是用 Gsap 裡的 ScrollTrigger 套件完成，就決定要好好研究這個套件。萬事起頭難，我們先從...

jason06286 ‧ 2021-07-30

2 Like 2 留言 2370 瀏覽

技術 2021 春季 JS 直播班心得

前言去年忙結婚的事情一度暫停學習及更新文章忙完結婚事以後剛好六角學院也開了很適合新手的JS直播課程自已實在是停了太久所以就立馬報名啦! 在上課之前的心理建設...

a841722 ‧ 2021-04-19

3 Like 1 留言 982 瀏覽

鐵人賽 Modern Web DAY 30

實作經典 JavaScript 30 系列第 30 篇

技術 Day30: 完賽心得

第30天，不免俗要來寫個完賽心得雖然javascript-30還差個幾天，才能把全部的實例都做完但還是要給自己拍拍手，利用這30天養成了一個好習慣而且真的沒想到...

喬依司 ‧ 2020-10-08 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 1527 瀏覽

鐵人賽 Modern Web DAY 29

實作經典 JavaScript 30 系列第 29 篇

技術 Day29: Event Capture, Propagation, Bubbling and Once

WES BOS系列影片Alex快速導讀系列影片今天比較偏觀念的講解主要是希望能較深入理解addEventListener()學習DOM的事件機制，包括事件捕獲...

喬依司 ‧ 2020-10-07 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 1907 瀏覽

鐵人賽 Modern Web DAY 28

實作經典 JavaScript 30 系列第 28 篇

技術 Day28: Sticky Nav

WES BOS系列影片Alex快速導讀系列影片今天針對常用的Navbar做fix的狀態這真的是很常見的功能，可以立馬學起來 1.先抓出NavBar的位置，以及...

喬依司 ‧ 2020-10-06 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 1514 瀏覽

鐵人賽 Modern Web DAY 27

實作經典 JavaScript 30 系列第 27 篇

技術 Day27:Speech Synthesis

WES BOS系列影片Alex快速導讀系列影片今天來認識 Web Speech API中的兩個功能一個是 SpeechSynthesisUtterance它包...

喬依司 ‧ 2020-10-05 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 1143 瀏覽

鐵人賽 Modern Web DAY 26

實作經典 JavaScript 30 系列第 26 篇

技術 Day26: Follow Along Links

WES BOS系列影片Alex快速導讀系列影片今天的練習是用js控制滑鼠游標，當滑鼠游標到達當前的連結時，我們使用一個新的方法getBoundingClien...

喬依司 ‧ 2020-10-04 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 1288 瀏覽

鐵人賽 Modern Web DAY 25

實作經典 JavaScript 30 系列第 25 篇

技術 Day25: Adding Up Times With Reduce

WES BOS系列影片Alex快速導讀系列影片今天的練習會用到reduce()還有用一些數學的運算，將秒數換算成時分秒然後又複習了一下dataset的用法事不...

喬依司 ‧ 2020-10-03 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 1077 瀏覽

鐵人賽 Modern Web DAY 24

實作經典 JavaScript 30 系列第 24 篇

技術 Day24: Sort Without Articles

WES BOS系列影片Alex快速導讀系列影片今天要結合正規表達式跟sort()來做排序的功能作者這邊假設了一個情境就是我們拿到了一串樂團的清單，希望可以用樂...

喬依司 ‧ 2020-10-02 ‧團隊自討苦吃三十天#像極了愛情

3 Like 0 留言 1195 瀏覽

鐵人賽 Modern Web DAY 23

實作經典 JavaScript 30 系列第 23 篇

技術 Day23: Mouse Move Shadow

WES BOS系列影片Alex快速導讀系列影片今天的練習重點是抓取DOM容器的座標與mousemove事件我們要做一個文字陰影與滑鼠互動的效果要做出這個效果，...

喬依司 ‧ 2020-10-01 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 984 瀏覽

鐵人賽 Modern Web DAY 22

實作經典 JavaScript 30 系列第 22 篇

技術 Day22: LocalStorage(二)

我們就必須使用LocalStorage來讓瀏覽器記住剛才輸入的資料紀錄完成後，同時將表單的回復成未輸入的狀態 localStorage.setItem('ite...

喬依司 ‧ 2020-09-30 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 1236 瀏覽

鐵人賽 Modern Web DAY 21

實作經典 JavaScript 30 系列第 21 篇

技術 Day21: LocalStorage(ㄧ)

WES BOS系列影片Alex快速導讀系列影片今天要來認識LocalStorage看不太懂的話，這裡也有一篇我覺得寫得很好理解的筆記可以參考localStor...

喬依司 ‧ 2020-09-29 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 967 瀏覽

鐵人賽 Modern Web DAY 20

實作經典 JavaScript 30 系列第 20 篇

技術 Day20: JS中引用與複製的差異(二)

今天針對物件來看引用與複製的差異先創造一個簡單的物件 const person = { name: 'Wes Bos', age: 80 }; 再製作...

喬依司 ‧ 2020-09-28 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 1050 瀏覽

鐵人賽 Modern Web DAY 19

實作經典 JavaScript 30 系列第 19 篇

技術 Day19: JS中引用與複製的差異(一)

WES BOS系列影片Alex快速導讀系列影片最一開始可以先試試看這兩段程式碼 let age = 100; let age2 = age; console....

喬依司 ‧ 2020-09-27 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 2331 瀏覽

鐵人賽 Modern Web DAY 18

實作經典 JavaScript 30 系列第 18 篇

技術 Day 18 : 為網頁增加圖片動畫效果

WES BOS系列影片Alex快速導讀系列影片今天要為靜態的文章，添加一些圖片進場的動畫效果練習抓取螢幕與圖片的長度，進而控制圖片的進場時間。 1.先抓出需要...

喬依司 ‧ 2020-09-26 ‧團隊自討苦吃三十天#像極了愛情

1 Like 1 留言 1887 瀏覽

鐵人賽 Modern Web DAY 17

實作經典 JavaScript 30 系列第 17 篇

技術 Day17: 為網站設計一個彩蛋

WES BOS系列影片Alex快速導讀系列影片今天的實例用到了cornify.js這個套件，功能類似打電動時要放大絕招前，一定要輸入一段指令串。例如:上上下下...

喬依司 ‧ 2020-09-25 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 1474 瀏覽

鐵人賽 Modern Web DAY 16

實作經典 JavaScript 30 系列第 16 篇

技術 Day16: 自製的影片撥放器(二)

今天首先要控制音量大小與調整播放速度 1.先設定會使用到的函式名稱 function handleRangeUpdate() { console.log(t...

喬依司 ‧ 2020-09-24 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 2724 瀏覽

鐵人賽 Modern Web DAY 15

實作經典 JavaScript 30 系列第 15 篇

技術 Day15: 自製的影片撥放器(一)

WES BOS系列影片Alex快速導讀系列影片今天要來製作自己的影片撥放器，覺得原始的控制套件很醜?那就自己做一個，不過作者已經幫我們做好樣式了。我們還是注重...

喬依司 ‧ 2020-09-23 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 2885 瀏覽

鐵人賽 Modern Web DAY 14

實作經典 JavaScript 30 系列第 14 篇

技術 Day14: 一次選取想要選取的checkbox

WES BOS系列影片Alex快速導讀系列影片今天要嘗試做一個todo-list的小功能，按下shift鍵時，可以一次勾選代辦事項。 1.首先抓出所有chec...

喬依司 ‧ 2020-09-22 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 1487 瀏覽

鐵人賽 Modern Web DAY 13

實作經典 JavaScript 30 系列第 13 篇

技術 Day13: 認識console

WES BOS系列影片Alex快速導讀系列影片今天比較輕鬆，作者帶我們深入了解console的一些使用方法，記錄下來，也許那天突然就會用到也不一定。作者有準...

喬依司 ‧ 2020-09-21 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 1561 瀏覽

鐵人賽 Modern Web DAY 12

實作經典 JavaScript 30 系列第 12 篇

技術 Day12: 在Canvas畫布上，用滑鼠畫畫(二)

今天可以再來玩一些Canvas的功能 1.更改畫筆的顏色，讓畫筆畫出彩虹的顏色這邊是使用HSL色彩概念，HSL即色相、飽和度、亮度(hue,Saturation...

喬依司 ‧ 2020-09-20 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 3183 瀏覽

鐵人賽 Modern Web DAY 11

實作經典 JavaScript 30 系列第 11 篇

技術 Day11: 在Canvas畫布上，用滑鼠畫畫(ㄧ)

WES BOS系列影片Alex快速導讀系列影片今天要用滑鼠在網頁上畫畫。初探Canvas元素的使用方式，可與MDN的Canvas教學手冊搭配服用但若是只想知道...

喬依司 ‧ 2020-09-19 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 1015 瀏覽

鐵人賽 Modern Web DAY 10

實作經典 JavaScript 30 系列第 10 篇

技術 Day10: 針對陣列的操作練習(三)

WES BOS系列影片Alex快速導讀系列影片開始前一樣可以先讀這篇卡斯伯的大補帖https://wcc723.github.io/javascript/20...

喬依司 ‧ 2020-09-18 ‧團隊自討苦吃三十天#像極了愛情