Vanilla Calculator｜立即顯示結果的優雅計算機
更新於 發佈於 閱讀時間約 1 分鐘
簡介
我並非這美術設計的原創，不過得益於 Instagram 上 @uixperience 的作品參考，才實現了這優雅計算機的外觀。在互動的部分，我讓按鍵在按下時減少陰影，並加深按鍵背景的顏色，這樣就像是真的被按了下去一樣；另外，在顯示計算結果的部分，透過 JS 增減 CSS class 的方式隨時做出文字響應式設計；以及按 C 鍵清除數字時，讓使用者享受到俐落動畫所帶來的流暢使用體驗；另外在細節設定上，透過 JS 讓重複輸入運算符時只顯示和計算最後一位，以及按下 = 鍵結算時只保留小數到第三位，這些細節都讓操作流程變得更好。雖然這次主題一開始是懷著配合漂亮外觀的 JS 實作，不過途中加入了許多自己的 UI/UX 設計，也做了許多陣列、字串和數字之間轉換的練習，是個令我感到成就感滿滿的作品！
開發紀錄
- 使用預處理器 Pug、Sass 撰寫 HTML、CSS
- 使用原生 JavaScript 撰寫，並著重於物件導向式開發
- 透過 JS 即時顯示計算結果，相較於傳統計算機，操作更直覺方便
- 使用增減 HTML class 的方式做出文字響應式設計（數字長度超過螢幕時的自適應）
- 使用 CSS animation 做出流暢的清除動畫
- 透過 JS 讓重複輸入的運算符只顯示並計算最後一位，減少誤按導致計算錯誤的問題
- 使用 `Math.round` 確保計算精度，並在結算時自動四捨五入到小數第三位，方便觀看計算結果
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是運算子，以及與運算子相關的知識。包括運算子的簡介、賦值運算子、算術運算子、遞增/遞減、比較運算子、邏輯運算子。
此章節旨在介紹TypeScript中的運算符，包括算數運算子、比較運算子、賦值運算子、位元運算子，以及他們的優先等級。每種運算子都以清晰的解釋和代碼範例進行詳細說明，幫助讀者理解並有效地在自己的程式碼中使用。
電腦只做一件事情: 運算。
我們所看到的任何酷酷的應用: 不論是網頁動畫、遊戲特效、甚至是 AI 說的話，全部都
是由電腦的運算結果組合而成的。
首先我們來梳理一下各個名詞之間的關聯:
1. 運算分成兩個部分: 運算子 (運算的名稱，如: 加法) 和運算元 (運算的對象，如: 8)。運算就是對資
※ 常用number型態的運算方法：
加、減、乘、除
求餘數(mod)：%
※ JavaScript 內建的 Math 物件提供了許多number相關的方法和常數。以下是一些常見的內建 Math 功能：
Math.PI：算出圓的面積。
Math.ceil：無條件進位
Math.floor
※ JavaScript的五種運算子：
我們希望操控這些值，來達成我們想要的結果。
運算式由運算元和運算子組成。運算元是指我們要拿去做運算的東西是什麼？例如：5和4。運算子是他要做什麼樣子的運算？例如："+"。
算術運算子："+加"、"-減"、"*乘"、"/除"、"%(mod餘數概念)"。
本課程學習如何修改按鈕外觀的方法，透過調整背景屬性和形狀。我們新增了四種背景顏色，修改每個按鈕的外觀。完成後，呈現不同按鈕風格。
本課程學習如何如何實作計算機介面，佈局文字元件及按鈕。學習使用 LinearLayout 垂直排列元件，調整背景色。透過 GridLayout 佈局計算機按鈕。
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是運算子，以及與運算子相關的知識。包括運算子的簡介、賦值運算子、算術運算子、遞增/遞減、比較運算子、邏輯運算子。
此章節旨在介紹TypeScript中的運算符，包括算數運算子、比較運算子、賦值運算子、位元運算子，以及他們的優先等級。每種運算子都以清晰的解釋和代碼範例進行詳細說明，幫助讀者理解並有效地在自己的程式碼中使用。
電腦只做一件事情: 運算。
我們所看到的任何酷酷的應用: 不論是網頁動畫、遊戲特效、甚至是 AI 說的話，全部都
是由電腦的運算結果組合而成的。
首先我們來梳理一下各個名詞之間的關聯:
1. 運算分成兩個部分: 運算子 (運算的名稱，如: 加法) 和運算元 (運算的對象，如: 8)。運算就是對資
※ 常用number型態的運算方法：
加、減、乘、除
求餘數(mod)：%
※ JavaScript 內建的 Math 物件提供了許多number相關的方法和常數。以下是一些常見的內建 Math 功能：
Math.PI：算出圓的面積。
Math.ceil：無條件進位
Math.floor
※ JavaScript的五種運算子：
我們希望操控這些值，來達成我們想要的結果。
運算式由運算元和運算子組成。運算元是指我們要拿去做運算的東西是什麼？例如：5和4。運算子是他要做什麼樣子的運算？例如："+"。
算術運算子："+加"、"-減"、"*乘"、"/除"、"%(mod餘數概念)"。
本課程學習如何修改按鈕外觀的方法，透過調整背景屬性和形狀。我們新增了四種背景顏色，修改每個按鈕的外觀。完成後，呈現不同按鈕風格。
本課程學習如何如何實作計算機介面，佈局文字元件及按鈕。學習使用 LinearLayout 垂直排列元件，調整背景色。透過 GridLayout 佈局計算機按鈕。