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

看板Web_Design作者 (Windows)時間9年前 (2016/06/13 09:49), 編輯推噓2(201)
留言3則, 3人參與, 最新討論串1/1
※ [本文轉錄自 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/ -- -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.249.183.148 ※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1465779607.A.89F.html

06/13 09:08, , 1F
nice
06/13 09:08, 1F
※ 發信站: 批踢踢實業坊(ptt.cc) ※ 轉錄者: Linux (49.217.114.203), 06/13/2016 09:49:44

06/13 10:42, , 2F
給你一個讚! 不知道能不能有「翻頁」的效果
06/13 10:42, 2F

06/13 10:46, , 3F
應該可以,利用 css rotate、transform 應該可以做得到!
06/13 10:46, 3F

06/14 10:16, , 4F
限制一下輸入最多四碼會更好喔
06/14 10:16, 4F
文章代碼(AID): #1NNX4wkt (Web_Design)
文章代碼(AID): #1NNX4wkt (Web_Design)