Burpee 4 minutes

Burpee 4 minutes 網址：https://burpee.chiayilai.com 最近開始每天 …

自己刻超簡單 React toast notice 功能

Toast notice 功能 讓使用者自己做了什麼動作，產生的結果是什麼，是很重要的事。在 SPA 中，因為 …

JavaScript 最好用的一招 – toggle class

原理 點擊按鈕，靠著控制指定目標的 class 名稱，搭配 CSS 來做到動態效果。可以用來做選單開關，樣式變 …

單純使用 npm 來編譯 Sass 和 JS

Be a minimalist, I like clean code. 之前都是用 gulp 來處理 Sass …

網頁版日曆

主要分成三個區塊，黑色的襯底板，紅色的頭板顯示月份，白色的紙張顯示日期。 對齊的方式因為都是單行，直接用 te …

跟著 hover 移動變化的選單橫桿

加入一個空標籤當為移動橫桿， 用 absolute 來定位 抓取橫桿要移動到的目標的寬度與 X 坐標，帶入給橫 …

簡單明瞭的返回上一頁 JS 寫法

window.history.back(); window.history.go(-1); // 上面兩種用法 …

自己刻最簡單高效能的圖片輪播 very simple slide show in vanilla JavaScript

圖片輪播是最常見的網頁元素之一，不用插件，也不需要 jQuery，可設定幾秒換下一張，滑鼠移上圖片時會停止換圖 …

image 各種型態轉換(blob, dataURL, canvas) in JavaScript

blob 轉成 dataURL blob 和 file 都可以使用，從 blob 讀取資料的唯一方式就是使用 …

簡單說 preventDefault(), stopPropagation(), return false 使用時機

preventDefault(): 預防作用的元素預設事件發生，如果只是要預防 <a href=”#”& …

向上捲動時，讓 header 出現；向下捲動時，讓 header 消失。

當使用者在瀏覽頁面內容時，header 佔的空間就減少了主內容的空間，所以我們可以設定當使用者向下捲動時，是在 …

表單簡易驗證，檢查空的輸入框，並出現提示

結合 bootstrap 的 tooltip，在使用者按下確定按鈕時，判斷表單是否有空的輸入框，並提示使用者輸 …

側邊欄開關

不用插件，少於 10 行的 JS 語法，輕鬆完成視窗外的側邊欄寫法。 用 body 有無 class=&#82 …