js 简单实现的计算器

最新推荐文章于 2022-05-03 21:50:45 发布

weixin_40533188

最新推荐文章于 2022-05-03 21:50:45 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/weixin_40533188/article/details/98880440

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单计算器</title>
<style type="text/css">
#caculate{
margin: 150px auto;
width: 500px;
}
</style>
</head>
<body>
<div id="caculator">
<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">
<input type="button" value="%" class="btn" title="mod">
</p>
</div>
<script type="text/javascript">

//获取元素
/*var caculator=document.querySelector("#caculator");
var formerInput=caculator.querySelector(".formerInput");
var laterInput=caculator.querySelector(".laterInput");
var sign=caculator.querySelector(".sign");
var resultOutput=caculator.querySelector(".resultOut*//*put");*/
var wrapElem=document.querySelector("#caculator");
//管理代码（）
var caculatorElem={
formerInput:wrapElem.querySelector(".formerInput"),
laterInput:wrapElem.querySelector(".laterInput"),
sign:wrapElem.querySelector(".sign"),
resultOutput:wrapElem.querySelector(".resultOutput"),
btns:wrapElem.querySelectorAll(".btn")
}

//1.结构分离,
//获取所有的button按钮，最好不要用标签名
/*var btns=caculator.querySelectorAll(".btn");*/
/*
注意：千万不要这样写，这样子的话，没有等点击的时候，就会执行函数了

btns[0].οnclick=addHandler();
btns[1].οnclick=subtractHandler();
btns[2].οnclick=multiplyHandler();
btns[3].οnclick=divideHandler();
*/
/*btns[0].οnclick=addHandler;
btns[1].οnclick=subtractHandler;
btns[2].οnclick=multiplyHandler;
btns[3].οnclick=divideHandler;*/

function each(array,fn){
for(var i=0;i<array.length;i++){
fn(i,array[i]);
}
}

//运算方法
function operate(name,num1,num2){

if(!operation[name]) throw new Error("不存在名为"+name+"的运算方法");
return operation[name](num1,num2);
}

each(caculatorElem.btns,function(index,ele){
ele.οnclick=function(){
//修改符号
updateSign(this.value);
outResult(operate(this.title,caculatorElem.formerInput.value,caculatorElem.laterInput.value));

}

});

var operation={
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;
},//添加自定义的方法
addOperation:function (name,fn) {
if(!this[name]){
this[name]=fn;
}
return this;

}
}

operation.addOperation("mod",function(num1,num2){
return num1%num2;
})

function updateSign(sign1){
caculatorElem.sign.innerHTML=sign1;
}
/*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 outResult(result){
caculatorElem.resultOutput.innerHTML=result;
}

/*
function addHandler(){
updateSign("+")
//因为加好可以拼接字符串，并且通过选择起获取的值都是字符串，所以需要通过在该字符串之前添加一个加号
outResult(operation.add(caculatorElem.formerInput.value,caculatorElem.laterInput.value));
}
function subtractHandler(){
updateSign("-")
outResult(operation.subtract(caculatorElem.formerInput.value,caculatorElem.laterInput.value));
}
function multiplyHandler(){
updateSign("*")
outResult(operation.multiply(caculatorElem.formerInput.value,caculatorElem.laterInput.value));
}
function divideHandler(){
updateSign("/")
outResult(operation.multiply(caculatorElem.formerInput.value,caculatorElem.laterInput.value));
}*/
</script>
</body>
</html>

weixin_40533188

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 简单实现的计算器

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <title>简单计算器</title> <style type="text/css">#caculate{margin: 150px aut...
复制链接

扫一扫