您的位置：首页 > 其它

面向对象思想实现简易计算器

2017-11-04 06:30 281 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: #e2e2e2;
}
*{
margin: 10px;
}
.wrap{
margin:200px auto;
width: 600px;
}
</style>
</head>
<body>
<div class="wrap">
<div id="top">
<input type="text" id="former">
<span id="operator"></span>
<input type="text" id="laster">
<span>=</span>
<span class="result"></span>
</div>
<div id="bottom">
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">×</button>
<button id="divide">÷</button>
<button id="mod">%</button>
<button id="reverse">1/x</button>
</div>
</div>
<script type="text/javascript">
var operation;
(function(){
var calculator={
former:document.getElementById('former'),
laster:document.getElementById('laster'),
operator:document.getElementById('operator'),
result:document.querySelector('.result'),
btns:document.getElementsByTagName('button'),
bottom:document.getElementById('bottom')
}
var operate={
add:function(num1,num2){
return num1+num2;
},
subtract:function(num1,num2){
return num1-num2;
},
multiply:function(num1,num2){
return num1*num2;
},
divide:function(num1,num2){
return num1/num2;
},
addoperate:function(name,fn){
if(!operate[name]){
operate[name]=fn;
}else{
throw new Error('已有该方法');
}
}
}

calculator.bottom.onclick=function(){
changeOperator(event.target.innerHTML);
changeResult(calculate(event.target.id,+calculator.former.value,+calculator.laster.value));
}

function changeOperator(content){
calculator.operator.innerHTML=content;
}
function changeResult(content){
calculator.result.innerHTML=content;
}
function calculate(name){
return operate[name](...[].slice.call(arguments,1));
}

//接口
operation=operate.addoperate;

})();

operation('mod',function(num1,num2){
return num1%num2;
});
operation('reverse',function(num1){
return 1/num1;
});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 面向对象

相关文章推荐

新的分享

章节导航