下面是关于“简易的JS计算器实现代码”的完整攻略：
一、准备工作
要实现一个简易的JS计算器，首先需要在HTML文件中创建计算器的界面，其中需要包括如下组件：
- 计算器界面：使用HTML的div元素模拟。
- 显示框：显示计算结果。
- 操作按钮：包括加、减、乘、除等常见计算操作，使用HTML的button元素模拟。
在创建好计算器的界面后，需要在JS文件中获取各个操作按钮的ID，以方便后续操作，并使用addEventListener()方法为按钮添加点击事件监听器。
二、实现计算器的核心逻辑
- 数字按键事件
在计算器界面中，每个数字按钮被点击后，需要将其数字值显示在显示框中，即实现姆供了数字输入功能。为此，在JS文件中需要添加数字按键事件监听器，并在事件处理函数中使用JavaScript的DOM操作将按键事件中携带的数字值添加进显示框中。
示例代码如下：
const numButtons = document.querySelectorAll('.calc-button__num');
const output = document.querySelector('.calc-output');
numButtons.forEach(function(button) {
button.addEventListener('click', function(event) {
output.value += event.target.textContent;
});
});
- 操作符按键事件
在计算器界面中，操作符按键被点击后，需要根据显示框中的数字值进行计算，并将计算结果显示在显示框中。为此，在JS文件中需要添加操作符按键事件监听器，并在事件处理函数中使用JavaScript实现计算器核心逻辑，包括数字的加减乘除等计算运算。
示例代码如下：
const operatorButtons = document.querySelectorAll('.calc-button__operator');
const calculate = function(a, b, operator) {
switch (operator) {
case '+':
return a + b;
case '-':
return a - b;
case '*':
return a * b;
case '/':
return a / b;
default:
throw new Error(`Unknown operator ${operator}.`);
}
};
let operand1 = null;
let operator = null;
operatorButtons.forEach(function(button) {
button.addEventListener('click', function(event) {
if (operand1 === null) {
operand1 = Number(output.value);
operator = event.target.textContent;
output.value = '';
} else {
const operand2 = Number(output.value);
const result = calculate(operand1, operand2, operator);
operand1 = result;
operator = event.target.textContent;
output.value = '';
output.value = result;
}
});
});
三、完整代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS Calculator</title>
<style>
.calc {
display: flex;
flex-wrap: wrap;
width: 240px;
margin: auto;
}
.calc__output {
width: 100%;
margin-bottom: 10px;
font-size: 18px;
}
.calc-button {
width: 50%;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
text-align: center;
background-color: #fff;
border: 1px solid transparent;
}
.calc-button:hover {
background-color: #eee;
}
.calc-button.--operator {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="calc">
<input type="text" class="calc__output" />
<button class="calc-button calc-button__num">7</button>
<button class="calc-button calc-button__num">8</button>
<button class="calc-button calc-button__num">9</button>
<button class="calc-button calc-button__operator">+</button>
<button class="calc-button calc-button__num">4</button>
<button class="calc-button calc-button__num">5</button>
<button class="calc-button calc-button__num">6</button>
<button class="calc-button calc-button__operator">-</button>
<button class="calc-button calc-button__num">1</button>
<button class="calc-button calc-button__num">2</button>
<button class="calc-button calc-button__num">3</button>
<button class="calc-button calc-button__operator">*</button>
<button class="calc-button calc-button__num">0</button>
<button class="calc-button calc-button__operator">/</button>
<button class="calc-button calc-button__operator">=</button>
<button class="calc-button calc-button__operator">C</button>
</div>
<script>
const numButtons = document.querySelectorAll('.calc-button__num');
const operatorButtons = document.querySelectorAll('.calc-button__operator');
const output = document.querySelector('.calc__output');
const calculate = function(a, b, operator) {
switch (operator) {
case '+':
return a + b;
case '-':
return a - b;
case '*':
return a * b;
case '/':
return a / b;
default:
throw new Error(`Unknown operator ${operator}.`);
}
};
let operand1 = null;
let operator = null;
numButtons.forEach(function(button) {
button.addEventListener('click', function(event) {
output.value += event.target.textContent;
});
});
operatorButtons.forEach(function(button) {
button.addEventListener('click', function(event) {
switch (event.target.textContent) {
case '+':
case '-':
case '*':
case '/':
if (operand1 === null) {
operand1 = Number(output.value);
} else {
const operand2 = Number(output.value);
const result = calculate(operand1, operand2, operator);
operand1 = result;
output.value = result;
}
operator = event.target.textContent;
output.value = '';
break;
case '=':
if (operand1 !== null && operator !== null) {
const operand2 = Number(output.value);
const result = calculate(operand1, operand2, operator);
operand1 = null;
operator = null;
output.value = result;
}
break;
case 'C':
operand1 = null;
operator = null;
output.value = '';
break;
default:
throw new Error(`Unknown operator ${event.target.textContent}.`);
}
});
});
</script>
</body>
</html>
以上是“简易的JS计算器实现代码”的完整攻略，希望能对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：简易的JS计算器实现代码 - Python技术站
微信扫一扫 
支付宝扫一扫 