數字翻轉計數器 使用簡單的 JavaScript 與 SCSS 實作數字翻轉計數器,藉由設定每個計數器元素的 class 來達成不同數字的顯示,分別以 n0~n9 的 class 來設定子元素 top 的位置。GitHub 內的關鍵 css 與 JavaScript 分別在這裡和這裡,以下依照步驟配合圖片講解一下! 首先建立要用的 HTML 結構,基本上就是 span 代表一個…

數字翻轉計數器

使用簡單的 JavaScriptSCSS 實作數字翻轉計數器,藉由設定每個計數器元素的 class 來達成不同數字的顯示,分別以 n0~n9 的 class 來設定子元素 top 的位置。GitHub 內的關鍵 css 與 JavaScript 分別在這裡這裡,以下依照步驟配合圖片講解一下!

首先建立要用的 HTML 結構,基本上就是 span 代表一個位數,裡面的 i 代表 10 個數字。

基本上就是 span 代表一個位數,裡面的 i 代表 10 個數字

瀏覽器畫面

設定 scss(css),將 span 給予 position: relative; 的屬性,然後針對子元素 i 設定 position: absolute;,此時看到瀏覽器畫面 span 內的 i 都疊在一起了。

設定 scss(css),將 span 給予 position: relative; 的屬性,然後針對子元素 i 設定 position: absolute

瀏覽器畫面 span 內的 i 都疊在一起了

利用 scss 的 for 迴圈,針對 nth-child 設定 top 的位置。瀏覽器使用開發者檢視,可以發現每個 i 都因為 for 迴圈加上使用 calc,所以有不同的設定值。

利用 scss 的 for 迴圈,針對 nth-child 設定 top 的位置

瀏覽器畫面

使用開發者檢視,可以發現每個 i 都因為 for 迴圈加上使用 calc,所以有不同的設定值

接著改變一下 HTML,將每個 span 加上 n5 的 class,並且修改 scss,將原本的 for 迴圈移除,改在 span 設定,使用雙層迴圈,分別針對 n0~n9 去設定 i 的不同位置。開啟瀏覽器,可以發現 i 被移到指定的 5。

接著改變一下 HTML,將每個 span 加上 n5 的 class,並且修改 scss,將原本的 for 迴圈移除,改在 span 設定,使用雙層迴圈,分別針對 n0~n9 去設定 i 的不同位置

開啟瀏覽器,可以發現 i 被移到指定的 5

使用 JavaScript 輔助,使用簡單的數學運算(/、%、pow),切割出各個位數,並且利用 jQuery 的 eq 來取得指定的 span。

使用 JavaScript 輔助,使用簡單的數學運算(/、%、pow),切割出各個位數,並且利用 jQuery 的 eq 來取得指定的 span

瀏覽器畫面,可以看到已經可以跑到指定的位置了

加上個 input,並且修改一下 JavaScript,讓使用者輸入數字時改變計數器。

加上個 input,並且修改一下 JavaScript,讓使用者輸入數字時改變計數器

修改一下 JavaScript,讓使用者輸入數字時改變計數器

瀏覽器畫面,可以讓使用者輸入數字時改變計數器

最後在 span 上加入 overflow: hidden;,如此就可以將不再位置內的 i 隱藏囉!同時 i 加上 transition 優化 top 移動的效果!

最後在 span 上加入 overflow: hidden;,如此就可以將不再位置內的 i 隱藏囉

隱藏其他的數字

加上 transition 優化 top 移動的效果

相關參考

實作台北 • 藝文活動 - OA Wu's Blog
實作台北 • 藝文活動
實作台北 • 藝文活動實作台北 • 藝文活動 這是項利用新北市政府資料開放平台提供的新北市政府文化局藝文活動 API 所製作的台北 • 藝文活動。使用 PHP 將 API 資料取下來後編輯成 HTML 頁面,並且放置到 Amazon S3。放置部署過程中同時將頁面所需的 SCSS、JavaScript 一起上傳至 S3。 上傳 S3 過程採用 PHP 執行,關鍵程式碼在這裡,主要是利用…
Pokémon Go 補給站地圖 - OA Wu's Blog
Pokémon Go 補給站地圖
Pokémon Go 補給站地圖Pokémon Go 補給站地圖 這是一個 Pokémon Go 進化後 CP 推測工具,可以快速查詢寶可夢進化後的 CP 範圍值,同時藉由網友互助回報而建立的全台寶可夢巢穴位置,讓大家可以查詢各精靈在台灣的分佈,若大家想要共同編輯巢穴文件可與網站作者聯絡,同時也可以查詢全台灣的補給站、道館的分佈。 若要進一步的查詢各精靈的精準數…
聊天地圖 LiveMaps - OA Wu's Blog
聊天地圖 LiveMaps
聊天地圖 LiveMaps聊天地圖 LiveMaps LiveMaps 是一個即時地圖聊天室,讓你在世界上任何位置都可以發出自己的感想動態。每個人都可以在地圖分享著她在世界各地、城市角落的心情寫照,網站藉由 Google 所提供的 Firebase 的 Realtime Database 以及 Google Maps JavaScript API 免費服務實作。 聊天地圖也是一個純前端技術的網站,仰賴 Fireb…
用 jQuery 做一套遊戲 - OA Wu's Blog
用 jQuery 做一套遊戲
用 jQuery 做一套遊戲用 jQuery 做一套遊戲 大學期間學習網頁開發過程中,總是會有一些有趣的靈感,而我總是喜歡使用我所會的語言工具,去將想法實現出來,而使用 jQuery 製作遊戲也是我的一項小小里程碑。 這作品相信大家會有似曾相似感,靈感來自於 Nintendo 的一款遊戲,叫做 Pokémon,當初構想曾有過大至商城化、地圖化劇情,但由於多項因…
吳政賢 個人簡歷 OA Wu LiveCoding.tw