<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
</head>
<body>
<h1>简易计算器</h1>
<div>
<span>数字1</span>
<input id="num1" type="number">
</div>
<div>
<span>数字2</span>
<input id="num2" type="number">
</div>
<div>
<button id="addition">加法</button>
<button id="subtraction">减法</button>
<button id="multiplication">乘法</button>
<button id="division">除法</button>
</div>
<div>
<input id="result" type="number" readonly>
</div>
<script>
//通过id获取元素
function getElementById(id){
return document.getElementById(id)
}
//获取计算结果
function getResult(fn){
var num1=Number(getElementById('num1').value);
var num2=Number(getElementById('num2').value);
var result=fn(num1,num2);
getElementById('result').value=result;
}
function add(num1,num2){
return num1 + num2;
}
function decrease(num1,num2){
return num1 - num2;
}
function multipy(num1,num2){
return num1 * num2;
}
function divide(num1,num2){
return num1 / num2;
}
getElementById('addition').addEventListener('click',function(){getResult(add)});
getElementById('subtraction').addEventListener('click',function(){getResult(decrease)});
getElementById('multiplication').addEventListener('click',function(){getResult(multipy)});
getElementById('division').addEventListener('click',function(){getResult(divide)});
</script>
</body>
</html>
2818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
