如何使用 JavaScript 设计具有新拟态效果/软 UI 的计算器?
在本教程中，我们将讨论如何使用 JavaScript 设计具有新拟态效果(也称为软 UI)的计算器。新拟态是一种近年来越来越流行的设计趋势，其特点是柔和的圆边和明/暗阴影。
设计计算器
设计计算器的第一步是设计一个基本布局。我们将使用 12 列网格，其中包含以下元素 -
用户输入数字的输入字段
计算结果的输出字段
一系列用于各种操作(加、减、乘、除等)的按钮
一旦我们有了布局，我们就可以开始添加一些 CSS 以使其具有新形态外观。我们首先为输入和输出字段提供浅色背景色，为按钮提供深色背景色。然后，我们将添加一些 CSS3 box-shadow 属性 来创建柔和的圆边。
添加 JavaScript
现在我们的计算器看起来已经很像了，是时候使用 JavaScript 添加一些功能了。我们首先创建一个简单的函数，该函数接受两个输入值并根据用户选择的操作执行计算。此函数将传递给我们针对各种按钮的事件处理程序。
接下来，我们将为每个按钮编写一个调用相应函数的事件处理程序。例如，加法按钮的事件处理程序将调用加法函数。
最后，我们将添加几行代码来处理输入和输出字段。当用户在输入字段中输入一个值时，我们会将其显示在输出字段中。当用户单击按钮时，我们将执行计算并在输出字段中显示结果。
示例
完整工作代码
就是这样!我们现在有一个使用 JavaScript 设计的可运行的 neumorphic 计算器。以下是供参考的完整代码 −
<!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 添加功能。
