下面是“JavaScript实例--实现计算器”的完整攻略。
1. 需求分析
在开始编写代码之前,我们需要先确定需求。计算器需要实现以下功能:
- 实现加、减、乘、除四则运算
- 实现小数点的输入和计算
- 实现清除和退格功能
- 实现等号的计算
2. 页面结构和样式
我们需要创建一个HTML页面,包含一个输入框、数字按钮、四则运算按钮和其他功能按钮,如清除和退格按钮等。对应的HTML结构可以参考以下示例:
<div class="calculator">
<input type="text" id="result" />
<button class="number" id="btn-1">1</button>
<button class="number" id="btn-2">2</button>
<button class="number" id="btn-3">3</button>
<button class="operator" id="btn-add">+</button>
<button class="number" id="btn-4">4</button>
<button class="number" id="btn-5">5</button>
<button class="number" id="btn-6">6</button>
<button class="operator" id="btn-sub">-</button>
<button class="number" id="btn-7">7</button>
<button class="number" id="btn-8">8</button>
<button class="number" id="btn-9">9</button>
<button class="operator" id="btn-mul">*</button>
<button class="clear" id="btn-clear">C</button>
<button class="number" id="btn-0">0</button>
<button class="decimal" id="btn-dot">.</button>
<button class="operator" id="btn-div">/</button>
<button class="backspace" id="btn-backspace">←</button>
<button class="equal" id="btn-equal">=</button>
</div>
我们需要为计算器添加样式,在CSS中添加样式。
3. JavaScript代码实现
3.1 获取DOM元素并添加事件监听器
const result = document.querySelector('#result');
const numbers = document.querySelectorAll('.number');
const operators = document.querySelectorAll('.operator');
const clear = document.querySelector('#btn-clear');
const backspace = document.querySelector('#btn-backspace');
const equal = document.querySelector('#btn-equal');
const decimal = document.querySelector('#btn-dot');
for (let i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', function () {
appendNumber(numbers[i].textContent);
});
}
for (let i = 0; i < operators.length; i++) {
operators[i].addEventListener('click', function () {
selectOperator(operators[i].textContent);
});
}
clear.addEventListener('click', function () {
clearResult();
});
backspace.addEventListener('click', function () {
deleteNumber();
});
decimal.addEventListener('click', function () {
addDecimal();
});
equal.addEventListener('click', function () {
calculateResult();
});
3.2 实现函数
下面我们将实现函数,包括:
- appendNumber
- selectOperator
- clearResult
- deleteNumber
- addDecimal
- calculateResult
let currentInput = '';
let previousInput = '';
let operator = null;
let isNewOperation = false;
function appendNumber(number) {
if (isNewOperation) {
currentInput = number;
isNewOperation = false;
} else {
currentInput += number;
}
updateScreen();
}
function selectOperator(selectedOperator) {
if (operator !== null) {
calculateResult();
}
previousInput = currentInput;
currentInput = '';
operator = selectedOperator;
}
function clearResult() {
currentInput = '';
previousInput = '';
operator = null;
isNewOperation = false;
updateScreen();
}
function deleteNumber() {
currentInput = currentInput.slice(0, -1);
updateScreen();
}
function addDecimal() {
if (currentInput === '') {
currentInput += '0.';
} else if (currentInput.indexOf('.') === -1) {
currentInput += '.';
}
updateScreen();
}
function calculateResult() {
const currentValue = parseFloat(currentInput);
const previousValue = parseFloat(previousInput);
if (isNaN(currentValue) || isNaN(previousValue)) {
return;
}
switch (operator) {
case '+':
currentInput = previousValue + currentValue;
break;
case '-':
currentInput = previousValue - currentValue;
break;
case '*':
currentInput = previousValue * currentValue;
break;
case '/':
currentInput = previousValue / currentValue;
break;
default:
return;
}
isNewOperation = true;
operator = null;
updateScreen();
}
function updateScreen() {
result.value = currentInput;
}
clearResult();
3.3 示例演示
下面给出两个示例:
3.3.1 演示1
- 点击数字按钮1,屏幕显示1。
- 点击加号按钮+,屏幕仍旧显示1。
- 点击数字按钮5,屏幕显示15。
- 点击等号按钮=,屏幕显示16。
3.3.2 演示2
- 点击数字按钮4,屏幕显示4。
- 点击乘号按钮*,屏幕仍旧显示4。
- 点击数字按钮2,屏幕显示42。
- 点击减号按钮-,屏幕仍旧显示42。
- 点击数字按钮5,屏幕显示5。
- 点击等号按钮=,屏幕显示37。
以上就是“JavaScript实例--实现计算器”的完整攻略,希望对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实例–实现计算器 - Python技术站