iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題! 系列

我們都知道進入一個新的未知領域,大多數的學生都會選擇從理論開始學習。

本系列文章將從實務層面著手,讀者不僅能從中學習理論,也能理解如何將理論應用於實作中。

鐵人鍊成 | 共 46 篇文章 | 38 人訂閱 訂閱系列文 RSS系列文

JS 31 - 一個 div 就能安心輸入的表單檢查提示!

大家好! 今天要實作的是表單的輸入提示。我們進入今天的主題吧! 程式碼 const input = Felix('input[id]'); const sta...

2021-10-16 ‧ 由 Felix 分享

JS 32 - 資料丟進來,就能計算所需樣本數量!

大家好! 今天要接續 JS 30 的內容。我們進入今天的主題吧! 程式碼 function parse() { var error = new Typ...

2021-10-17 ‧ 由 Felix 分享

JS 33 - 在觸控裝置偵測手勢的滑動方向!

大家好! 今天我們要實作在觸控裝置中偵測手勢的方向。我們進入今天的主題吧!備註:前幾天和今天的範例將會於近期補上。 程式碼 (function (xPos,...

2021-10-18 ‧ 由 Felix 分享

JS 34 - 實作 Medium 的漸進式圖片載入效果

大家好! 各位知道 Medium 的圖片載入效果嗎?就是先模糊圖片,等到載入完成再將圖片轉為清晰的那個效果。我們今天就是要實作這個。 程式碼 window.a...

2021-10-19 ‧ 由 Felix 分享

JS 35 - 用 input 選擇圖片後顯示預覽圖

大家好! 今天我們要實作的是,用 input 選擇圖片並在畫面上顯示預覽圖。我們進入今天的主題吧! 程式碼 Felix('input[type="f...

2021-10-20 ‧ 由 Felix 分享

JS 36 - 新增並記錄網頁的偏好顏色模式

大家好! 今天我們要實作網頁的深淺色模式。我們進入今天的主題吧! 樣式 body { background-color: #fafafa; c...

2021-10-21 ‧ 由 Felix 分享

JS 37 - 滾動網頁即自動浮現元素

大家好! 今天要實作網頁滾動到特定位置時,自動浮現元素的效果。我們進入今天的主題吧! 樣式 [data-revealing] { opacity: 0...

2021-10-22 ‧ 由 Felix 分享

JS 38 - 實作 Tab 頁籤

大家好! 樣式 .tabs { width: 100%; max-width: 60em; display: flex; f...

2021-10-23 ‧ 由 Felix 分享

JS 39 - 平滑調整網頁字型大小

大家好! 今天我們要實作讓網頁的字型大小能平滑地縮放。我們進入今天的主題吧! 樣式 body { font-size: 16px; trans...

2021-10-24 ‧ 由 Felix 分享

JS 40 - 向下滾動網頁即自動隱藏導覽列

大家好! 今天我們要實作向下滾動網頁時,自動隱藏頁手或導覽列的效果。我們進入今天的主題吧! 樣式 header { transition: trans...

2021-10-25 ‧ 由 Felix 分享