如何使用 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 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告