Fw: [心得] 實作數字翻轉計數器

作者: Linux (Windows)   2016-06-13 09:49:44
※ [本文轉錄自 Soft_Job 看板 #1NNWMNYV ]
作者: Linux (Windows) 看板: Soft_Job
標題: [心得] 實作數字翻轉計數器
時間: Mon Jun 13 09:00:03 2016
Hi 各位早!
上班第一天分享個小小作品輕鬆一下XD
Demo: http://works.ioa.tw/number_flipping_counter/index.html
基本上就是..嗯,就是一個數字翻轉計數器!
其實主要使用簡單的 JavaScript 與 SCSS 實作數字翻轉計數器,
藉由設定每個計數器元素的 class 來達成不同數字的顯示,
分別以 n0~n9 的 class 來設定子元素 top 的位置。
在 GitHub 的 Readme 上有詳細解說作法,
因為剛收完假,心還沒收,所以可能寫得有些零亂,請各位大大見諒..
如果各位喜歡的話,歡迎按星星喔!
GitHub: https://github.com/comdan66/number_flipping_counter/
作者: ian90911 (xopowo)   2015-06-13 09:08:00
nice
作者: chang0206 (Eric Chang)   2016-06-13 10:42:00
給你一個讚! 不知道能不能有「翻頁」的效果
作者: Linux (Windows)   2016-06-13 10:46:00
應該可以,利用 css rotate、transform 應該可以做得到!
作者: ChenCH1986 (Chen,C.H.)   2016-06-14 10:16:00
限制一下輸入最多四碼會更好喔

Links booklink

Contact Us: admin [ a t ] ucptt.com