JS实现简易计算器的7种⽅法先放图（好吧⽐较挫）
⽅法⼀：最容易版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>
body {
background-color: #eee;
}
#calculator {
margin: 100px 0 0 150px;
}
</style>
</head>
<body>
<!-- 简易计算器 -->
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1" />
<span class="sign">+</span>
<input type="text" class="laterInput" value="1" />
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button" value="+" onclick="addHandler();" />
<input type="button" value="-" onclick="subtractHandler();" />
<input type="button" value="×" onclick="multiplyHandler();" />
<input type="button" value="÷" onclick="divideHandler();" />
</p>
</div>
<script>
// 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
// 加
function addHandler() {
sign.innerHTML = '+';
resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
// 减
function subtractHandler() {
sign.innerHTML = '-';
resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘
function multiplyHandler() {
sign.innerHTML = '×';
resultOutput.innerHTML = formerInput.value * laterInput.value;
}
/
/ 除
function divideHandler() {
sign.innerHTML = '÷';
resultOutput.innerHTML = formerInput.value / laterInput.value;
}
</script>
</body>
</html>
⽅法⼆：结构和⾏为分离
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>
body {
background-color: #eee;
#calculator {
margin: 100px 0 0 150px;
}
</style>
</head>
<body>
<!-- 简易计算器 -->
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1" />
<span class="sign">+</span>
<input type="text" class="laterInput" value="1" />
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button" value="+" onclick="addHandler();" />
<input type="button" value="-" onclick="subtractHandler();" />
<input type="button" value="×" onclick="multiplyHandler();" />
<input type="button" value="÷" onclick="divideHandler();" />
</p>
</div>
<script>
// 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
var btns = calculator.querySelectorAll('.btn');
// 绑定事件
// +
btns[0].onclick = addHandler;
// -
btns[1].onclick = subtractHandler;
// ×
btns[2].onclick = multiplyHandler;
// ÷
btns[3].onclick = divideHandler;
// 加
function addHandler() {
sign.innerHTML = '+';
resultOutput.innerHTML = +formerInput.value + +laterInput.value;        }
// 减
function subtractHandler() {
sign.innerHTML = '-';
resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘
function multiplyHandler() {
sign.innerHTML = '×';
resultOutput.innerHTML = formerInput.value * laterInput.value;
}
// 除
function divideHandler() {
sign.innerHTML = '÷';
resultOutput.innerHTML = formerInput.value / laterInput.value;
}
</script>
</body>
</html>
⽅法三：循环绑定事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>
body {
background-color: #eee;
}
#calculator {
margin: 100px 0 0 150px;
}
</style>
</head>
<!-- 简易计算器 -->
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1" />
<span class="sign">+</span>
<input type="text" class="laterInput" value="1" />
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button" value="+" onclick="addHandler();" />
<input type="button" value="-" onclick="subtractHandler();" />
<input type="button" value="×" onclick="multiplyHandler();" />
<input type="button" value="÷" onclick="divideHandler();" />
</p>
</div>
<script>
/
/ 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
var btns = calculator.querySelectorAll('.btn');
// 绑定事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
switch (this.title) {
case 'add':
addHandler();
break;
case 'subtract':
subtractHandler();
break;
case 'multiply':
multiplyHandler();
break;
case 'divide':
divideHandler();
break;
}
};
}
// 加
function addHandler() {
sign.innerHTML = '+';
resultOutput.innerHTML = +formerInput.value + +laterInput.value;        }
// 减
function subtractHandler() {
sign.innerHTML = '-';
resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘
function multiplyHandler() {
sign.innerHTML = '×';
resultOutput.innerHTML = formerInput.value * laterInput.value;
}
// 除
function divideHandler() {
sign.innerHTML = '÷';
resultOutput.innerHTML = formerInput.value / laterInput.value;
}
</script>
</body>
</html>
⽅法四：提取函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>
body {
background-color: #eee;
}
#calculator {
margin: 100px 0 0 150px;
}
</style>
</head>
<body>
<!-- 简易计算器 -->
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1" />
<span class="sign">+</span>
<input type="text" class="laterInput" value="1" />
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
js方法
<input type="button" value="+" class="btn" title="add" />
<input type="button" value="-" class="btn" title="subtract" />        <input type="button" value="×" class="btn" title="multiply" />        <input type="button" value="÷" class="btn" title="divide" />    </p>
</div>
<script>
// 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
var btns = calculator.querySelectorAll('.btn');
// 绑定事件
each(btns, function (index, elem ) {
switch (this.title) {
case 'add':
addHandler();
break;
case 'subtract':
subtractHandler();
break;
case 'multiply':
multiplyHandler();
break;
case 'divide':
divideHandler();
break;
}
};
});
// 遍历
function each(array, fn) {
for (var i = 0; i < array.length; i++) {
fn(i, array[i]);
}
}
/
/ 更新符号
function updateSign(symbol) {
sign.innerHTML = symbol;
}
// 加法
function add(num1, num2) {
return +num1 + +num2;
}
// 减法
function subtract(num1, num2) {
return num1 - num2;
}
// 乘法
function multiply(num1, num2) {
return num1 * num2;
}
// 除法
function divide(num1, num2) {
return num1 / num2;
}
// 输出结果
function outputResult(result) {
resultOutput.innerHTML = result;
}
// 加
function addHandler() {
// sign.innerHTML = '+';
updateSign('+');
outputResult(add(formerInput.value, laterInput.value));
}
// 减
function subtractHandler() {
updateSign('-');
outputResult(subtract(formerInput.value, laterInput.value));        }
// 乘
function multiplyHandler() {
updateSign('×');
outputResult(multiply(formerInput.value, laterInput.value));        }
// 除
function divideHandler() {
updateSign('÷');
outputResult(divide(formerInput.value, laterInput.value));        }
</script>
</body>
</html>
⽅法五：管理代码(到组织)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>
body {
background-color: #eee;
}
#calculator {
margin: 100px 0 0 150px;
}
</style>
</head>
<body>
<!-- 简易计算器 -->
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1" />
<span class="sign">+</span>
<input type="text" class="laterInput" value="1" />
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button" value="+" class="btn" title="add" />
<input type="button" value="-" class="btn" title="subtract" />        <input type="button" value="×" class="btn" title="multiply" />        <input type="button" value="÷" class="btn" title="divide" />    </p>
</div>
<script>
// 获取元素
var wrapElem = document.querySelector('#calculator');
var calculatorElem = {
formerInput: wrapElem.querySelector('.formerInput'),
laterInput: wrapElem.querySelector('.laterInput'),
sign: wrapElem.querySelector('.sign'),
resultOutput: wrapElem.querySelector('.resultOutput'),                btns: wrapElem.querySelectorAll('.btn')
};
// 绑定事件
each(calculatorElem.btns, function (index, elem    ) {
switch (this.title) {
case 'add':
addHandler();
break;
case 'subtract':
subtractHandler();
break;
case 'multiply':

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。