如何使用 JavaScript 設計帶有 Neumorphism 效果/柔和 UI 的計算器？

在本教程中，我們將討論如何使用 JavaScript 設計一個帶有擬態效果（也稱為柔和 UI）的計算器。擬態是一種近年來越來越受歡迎的設計趨勢，其特點是柔和的圓角和明暗陰影。

計算器設計

設計計算器的第一步是設計一個基本的佈局。我們將使用一個 12 列的網格，包含以下元素 -

  • 一個供使用者輸入數字的輸入欄位

  • 一個用於顯示計算結果的輸出欄位

  • 一系列用於各種運算（加、減、乘、除等）的按鈕

一旦我們有了佈局，就可以開始新增一些 CSS 來使其具有擬態外觀。我們將首先為輸入和輸出欄位設定淺色背景，為按鈕設定深色背景。然後，我們將新增一些CSS3 盒陰影屬性來建立柔和的圓角。

新增 JavaScript

現在我們的計算器看起來像那麼回事了，是時候用 JavaScript 新增一些功能了。我們將首先建立一個簡單的函式，該函式接受兩個輸入值並根據使用者選擇的運算執行計算。此函式將傳遞給我們各個按鈕的事件處理程式。

接下來，我們將為每個按鈕編寫一個事件處理程式，該處理程式呼叫相應的函式。例如，加法按鈕的事件處理程式將呼叫加法函式。

最後，我們將新增幾行程式碼來處理輸入和輸出欄位。當用戶在輸入欄位中輸入值時，我們將在輸出欄位中顯示它。當用戶點選按鈕時，我們將執行計算並將結果顯示在輸出欄位中。

示例

完整的工作程式碼

就是這樣！我們現在已經設計了一個使用 JavaScript 設計的、可工作的擬態計算器。以下是供參考的完整程式碼 -

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Neumorphic Calculator</title>
   <style>
      /* Basic Layout */
      .container {
         display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-gap: 20px;
      }
      /* Input Field */
      .input {
         grid-column: 1 / span 12;
         background-color: #fafafa;
         border: none;
         padding: 20px;
         font-size: 16px;
         box-shadow: inset 5px 5px 10px #eaeaea,
         inset -5px -5px 10px #ffffff;
      }
      .input2 {
         grid-column: 1 / span 12;
         background-color: #fafafa;
         border: none;
         padding: 20px;
         font-size: 16px;
         box-shadow: inset 5px 5px 10px #eaeaea,
         inset -5px -5px 10px #ffffff;
      }
      /* Output Field */
      .output {
         grid-column: 1 / span 12;
         background-color: #fafafa;
         border: none;
         padding: 20px;
         font-size: 16px;
         box-shadow: inset 5px 5px 10px #eaeaea,
         inset -5px -5px 10px #ffffff;
      }
      /* Button */
      .button {
         grid-column: 1 / span 4;
         background-color: #424242;
         border: none;
         padding: 20px;
         font-size: 16px;
         color: #fff;
         cursor: pointer;
         box-shadow: 5px 5px 10px #b3b3b3, -5px -5px 10px #ffffff;
      }
   </style>
</head>
<body>
   <div class="container">
      <input type="text" class="input" placeholder="Enter a value">
      <input type="text" class="input2" placeholder="Enter a value">
      <input type="text" class="output" placeholder="Result">
      <button class="button">+</button>
      <button class="button">-</button>
      <button class="button">*</button>
      <button class="button">/</button>
   </div>
   <script>
      
      // Function to perform a calculation
      function calculate(num1, num2, operation) {
         switch (operation) {
            case '+':
            return num1 + num2;
            break;
            case '-':
            return num1 - num2;
            break;
            case '*':
            return num1 * num2;
            break;
            case '/':
            return num1 / num2;
            break;
         }
      }
 
      // Get the input and output fields
      const input = document.querySelector('.input');
      const input2 = document.querySelector('.input2');
      const output = document.querySelector('.output');

      // Get the buttons
      const buttons = document.querySelectorAll('.button');
 
      // Add event listeners to the buttons
      buttons.forEach(button => {
         button.addEventListener('click', () => {
 
            // Get the input values
            const num1 = parseFloat(input.value);
            const num2 = parseFloat(input2.value);
 
            // Perform the calculation
            const result = calculate(num1, num2, button.innerHTML);
   
            // Display the result
            output.value = result;
         });
      });
 
      // Add event listener to the input field
      input.addEventListener('input', () => {
         output.value = input.value;
      });
   </script>
</body>
</html>

使用 JavaScript 建立計算器的一大優點是它易於擴充套件。例如，我們可以為更復雜的計算新增更多函式，或者可以新增事件處理程式來處理鍵盤輸入。

在本教程中，我們討論瞭如何使用 JavaScript 設計一個帶有擬態效果的計算器。擬態是設計中一種不斷發展的趨勢，其特點是柔和的圓角和明暗陰影。我們使用 CSS 為計算器提供了這種外觀，並使用 JavaScript 添加了功能。

更新於： 2022 年 8 月 4 日

210 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告