掌握 Web 开发中的基本算术运算
构建一个简单的基于 Web 的计算器是开始进行 Web 编程的绝佳方式。此项目可让您设计一个用户友好的工具，该工具能够执行乘法、除法、加法和减法等基本数学运算。您将学习如何通过结合 HTML（用于结构）、CSS（用于样式）和 JavaScript（用于功能）来创建响应用户交互的交互式应用程序。这不仅是一项出色的入门练习，而且还为未来更复杂的项目奠定了框架。
HTML代码（代码创建了一个简单的计算器界面，其中包含数字和运算按钮）：
<body>
<!-- Main container for the calculator -->
<div class="calculator">
<!-- Display input field where calculations are shown; it is disabled to prevent user input -->
<input type="text" id="display" disabled />
<!-- Container for calculator buttons -->
<div class="buttons">
<!-- Number buttons: when clicked, they append their value to the display -->
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('+')">+</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('-')">-</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('*')">*</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<!-- Equals button: when clicked, it triggers the calculation of the expression in the display -->
<button onclick="calculate()">=</button>
<button onclick="appendValue('/')">/</button>
<!-- Clear button: clears the display when clicked -->
<button onclick="clearDisplay()">C</button>
<!-- Delete button: removes the last character from the display -->
<button onclick="deleteLast()">
<!-- SVG icon representing the delete action -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708z" />
</svg>
</button>
</div>
</div>
</body>CSS代码（此样式是一个简单的计算器，具有 flexbox 布局、网格按钮和响应式设计。）：
/* Styles for the body of the page */
body {
display: flex; /* Use flexbox layout for alignment */
justify-content: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
height: 100vh; /* Full height of the viewport */
background-color: hsl(218, 13%, 88%); /* Light blue background color */
font-family: Arial, sans-serif; /* Font style for the text */
margin: 0; /* Remove default margin */
}
/* Styles for the main calculator container */
.calculator {
width: 250px; /* Set fixed width for the calculator */
background-color: #ffffff; /* White background for the calculator */
border-radius: 8px; /* Rounded corners */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
overflow: hidden; /* Hide overflow content */
}
/* Styles for the display area of the calculator */
#display {
width: 90%; /* 90% of the calculator width */
height: 60px; /* Fixed height for the display */
font-size: 24px; /* Larger text size for readability */
text-align: right; /* Right-align text in the display */
padding: 10px; /* Padding inside the display */
border: none; /* Remove border */
background-color: #f8f8f8; /* Light gray background for the display */
color: #333; /* Dark text color */
}
/* Styles for the buttons container */
.buttons {
display: grid; /* Use grid layout for buttons */
grid-template-columns: repeat(4, 1fr); /* Four equal columns */
gap: 5px; /* Space between buttons */
padding: 10px; /* Padding around the button grid */
}
/* Styles for individual buttons */
button {
width: 100%; /* Full width of the grid cell */
height: 50px; /* Fixed height for buttons */
font-size: 18px; /* Text size for buttons */
border: none; /* Remove border */
background-color: #e0e0e0; /* Light gray background for buttons */
color: #333; /* Dark text color */
cursor: pointer; /* Pointer cursor on hover */
border-radius: 5px; /* Rounded corners for buttons */
}
/* Hover effect for buttons */
button:hover {
background-color: #c0c0c0; /* Darker gray on hover */
}
/* Active state for buttons when clicked */
button:active {
background-color: #a0a0a0; /* Even darker gray when active */
}
/* Special styling for every fourth button (e.g., operation buttons) */
button:nth-child(4n) {
background-color: #4caf50; /* Green background for every fourth button */
color: white; /* White text for contrast */
}
/* Special styling for the second-to-last button (clear button) */
button:nth-last-child(2) {
background-color: #f44336; /* Red background for the clear button */
color: white; /* White text for contrast */
}JavaScript 代码（此 JavaScript 处理计算器功能，如附加值、清除显示、删除字符和评估表达式）
function appendValue(value) {
// Get the display element by its ID and append the value to its current content.
document.getElementById("display").value += value;
}
function clearDisplay() {
// Set the value of the display to an empty string, effectively clearing it.
document.getElementById("display").value = '';
}
function deleteLast() {
// Get the display element by its ID.
const display = document.getElementById("display");
// Remove the last character from the display value using slice.
display.value = display.value.slice(0, -1);
}
function calculate() {
try {
// Evaluate the expression in the display using eval and store the result.
const result = eval(document.getElementById("display").value);
// Update the display with the result of the evaluation.
document.getElementById("display").value = result;
} catch (error) {
// Alert the user if the evaluation throws an error (e.g., invalid operation).
alert("Invalid operation");
}
}效果：
结论：
构建一个简单的基于 Web 的计算器是掌握 Web 开发的完美途径。它结合了 HTML、CSS 和 JavaScript，以创建一个响应用户输入并执行实时计算的交互式工具。通过完成这个项目，您将解锁更高级应用程序所需的技能，学习如何无缝融合设计、功能和用户体验。这个计算器不仅具有实用目的，还为您未来的编码之旅奠定了坚实的基础。
版权声明：
作者：兴兴
文章：掌握 Web 开发中的基本算术运算
链接：https://www.networkcabin.com/notes/3484
文章版权归本站所有，未经授权请勿转载。
作者：兴兴
文章：掌握 Web 开发中的基本算术运算
链接：https://www.networkcabin.com/notes/3484
文章版权归本站所有，未经授权请勿转载。
THE END
