您的位置：首页 > Web前端

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

2017-10-06 22:54 267 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta c
4000
harset="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>

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

标签：

相关文章推荐

新的分享

章节导航