5分钟DIY极简计算器，体验非凡数字乐章

2024-01-27 01:36:32

数字乐章，指尖奏响：打造你的极简计算器

置身于信息浩瀚的海洋中，我们习惯使用各种工具来处理繁杂的数据。计算器，作为一种小小的工具，却承载着我们多少智慧与便利。今天，让我们踏上一场数字探索之旅，仅需五分钟，你就能创造出自己的极简计算器，奏响指尖的数字乐章！

绘制计算器蓝图

首先，我们从创建HTML文档开始，它将作为计算器的基础架构。使用<form>标签创建一个表单，这是计算器的容器：

<form>
...
</form>

接下来，需要创建两个主要元素：显示器和按钮。显示器用于展示计算结果，按钮用于输入数字和运算符。

显示器使用<input>标签，并将其属性type设置为text：

<input type="text" class="result" readonly>

按钮使用<button>标签，并为其添加class属性，以便在CSS中进行样式设计：

<button type="button" class="anniu">7</button>

添加CSS，涂抹色彩

为计算器添加CSS样式，让它焕然一新。首先，设置计算器的宽度、高度和居中显示：

form {
width: 250px;
height: 350px;
margin: 0 auto;
}

接下来，为显示器和按钮设置样式：

.result {
width: 250px;
height: 50px;
font-size: 24px;
text-align: right;
border: 1px solid black;
}

.anniu {
width: 50px;
height: 50px;
font-size: 24px;
margin: 5px;
border: 1px solid black;
background-color: #ccc;
}

注入活力，赋予生命

至此，计算器的雏形已具，但仍缺乏生机。为按钮添加JavaScript代码，让它们响应点击：

const result = document.querySelector('.result');
const buttons = document.querySelectorAll('.anniu');

buttons.forEach((button) => {
button.addEventListener('click', (e) => {
result.value += e.target.innerText;
});
});

此代码获取显示器和按钮的元素引用。每个按钮添加点击事件监听器，当按钮被点击时，它会将按钮上的文本添加到显示器中。

计算器现已能显示数字，再添加代码实现基本运算功能：

const operators = ['+', '-', '*', '/'];

buttons.forEach((button) => {
if (operators.includes(button.innerText)) {
button.addEventListener('click', (e) => {
const operator = e.target.innerText;
const numbers = result.value.split(' ');
const firstNumber = parseFloat(numbers[0]);
const secondNumber = parseFloat(numbers[1]);

switch (operator) {
case '+':
result.value = firstNumber + secondNumber;
break;
case '-':
result.value = firstNumber - secondNumber;
break;
case '*':
result.value = firstNumber * secondNumber;
break;
case '/':
result.value = firstNumber / secondNumber;
break;
}
});
}
});