1-前端之路的开始-一个简单的计算器

最新推荐文章于 2024-05-25 09:11:53 发布

chenmouren_boke

最新推荐文章于 2024-05-25 09:11:53 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/chenmouren_boke/article/details/78167609

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #eee
}
#calculator{
margin: 400px 0 0 700px;
}
</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 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>