js 简单计算器

最新推荐文章于 2023-04-01 23:50:27 发布

weixin_40533188

最新推荐文章于 2023-04-01 23:50:27 发布

阅读量114

点赞数

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

版权

<!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">
</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(".resultOutput");

//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;*/

//遍历循环
for(var i=0;i<btns.length;i++){
//判断是什么号就做什么运算
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;
alert(resultOutput);
}
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>

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...
复制链接

扫一扫