表單驗證：中文姓名、身分證、手機條碼、生日、信箱、手機、選擇縣市
本篇大綱：本篇要解決的問題。中文姓名。身分證字號、手機條碼。生日 / 出生年月日。E-mail 電子信箱。手機。選擇縣市。範例及原始碼。
用原生 JavaScript 做一個簡單的抽獎功能頁面
本篇大綱：本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎，就自己動手寫了一個出來。把抽獎的名單換成店家名稱，順便再加上Google Map進去，就解決不知道午餐要吃什麼的煩惱啦~
YAML 基本使用筆記
本篇大綱：本篇要解決的問題。YAML 重點觀念。註解。Key-Value Pairs。Objects。Array Lists。Multi Line Strings、Environment Variables、Placeholder。
Plyr 播放器使用筆記：控制項、取值、事件、改樣式、外部平台影片
本篇大綱：本篇要解決的問題。建立影片播放器及控制項、開啟所有控制項、新增字幕檔、新增多種畫質選擇、提示 Tooltip、中文化介面、時間軸加上段落標記。取值：影片總時長、當下秒數。監聽事件：播放、暫停。修改樣式。外部平台影片：Youtube、Vimeo。
Video.js 使用筆記：中文介面、取值、事件、改樣式
本篇大綱：本篇要解決的問題。建立影片播放器、引用 CSS、JS、HTML。使用中文介面。取值：影片總長度、當下秒數。監聽事件：播放、暫停。改變播放器樣式。範例原始碼。
改變 iframe src 時不增加瀏覽歷史紀錄
本篇大綱：本篇要解決的問題。製作一個 Demo。解法：直接替換掉 iframe 的 HTML。實測後發現，是每換一次 iframe src，瀏覽紀錄就會被新增一筆，所以按了上一頁，就是回到原頁，使用者就會以為上一頁的按鈕壞了。
CustomEvent 客製一個 addEventListener
本篇大綱：本篇要解決的問題。製作一個 Demo。CustomEvent。在要的地方註冊客製事件。本篇就是實作一個自己的事件出來，主要參考文件：MDN：CustomEvent。
用 Day.js 把秒數轉換為時間
學習如何使用 Day.js 將秒數轉換為時、分、秒的時間格式。本文詳細解釋了相關程式碼和操作方法，並提供了一個實用的 Tailwind CSS Demo 頁面供讀者試用和學習。
前端 POST 檔案後，用 Node.js 把檔案傳上 FTP
本篇大綱：本篇要解決的問題。前端 JavaScript 傳送檔案。後端 Node.js 傳檔案到 FTP。這篇就是寫怎麼把在前端完成的檔案，POST 把檔案給後端後，後端把收到的檔案傳進 FTP 中的實作筆記。
用 JavaScript 監聽頁面 / 頁籤被關閉的事件
本篇大綱：本篇要解決的問題。關閉視窗 / 頁籤 onbeforeunload。視窗 / 頁籤的變動 onvisibilitychange、Page Visibility API。關於無法計算的部份，就放手讓它飛。
2 種快速安裝、使用 Tailwind CSS 的方式
本篇大綱：本篇要解決的問題。方法 1：Tailwind CLI、建立 tailwind.css 檔、建立 tailwind.config.js 檔、開發時的監聽、上線前的編譯 Building for production。方法 2：引用大神 JS 檔。
Recent Comments