制作一个简单的计算器
2018-10-11 本文已影响0人
聽說_0100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
#compute{
width:540px;
height:270px;
border:1px solid #efefef;
margin:0 auto;
}
input{
width:505px;
height:55px;
border:none;
margin-left:17px;
text-align: right;
outline:none;
font-size:20px;
line-height: 25px;
}
ul{
width:505px;
padding:0;
height:200px;
list-style: none;
margin:0;
margin-left:17px;
}
ul li{
display: block;
float: left;
width:123px;
height:35px;
border:1px solid #ddd;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<div id="compute">
<input type="text" readonly>
<ul>
<li>(</li>
<li>)</li>
<li>%</li>
<li>C</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>/</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>-</li>
<li>0</li>
<li>.</li>
<li>=</li>
<li>+</li>
</ul>
</div>
<script>
window.onload = function(){
var type = false;
var oInput = document.getElementsByTagName('input')[0];//获取input标签
var oLi = document.getElementsByTagName('li');//获取li标签
for(var i=0;i<oLi.length;i++){
oLi[i].onclick = function(){
if(type){
oInput.value = '';
type = false;
}
var va = this.innerText;//获取出了li标签里面的内容
oInput.value = oInput.value+va;
};
}
oLi[18].onclick = function(){
var jieguo = eval(oInput.value);
oInput.value = oInput.value + "="+jieguo;
type = true;
};
oLi[3].onclick = function(){
oInput.value = '';
};
};
</script>
</body>
</html>
