<!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 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>