html+js+css做成的简单计算器

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>计算器</title>
<style>
@charset"utf-8";
* {
margin: 0;
padding: 0;
}

body {
font-size: 26px;
font-family: "微软雅黑";
}

ul,
li {
list-style-type: none;
}

.main {
width: 300px;
overflow: hidden;
margin: 10px auto;
}

#display {
width: 100%;
height: 70px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid #aaa;
border-bottom: 0;
font-size: 26px;
}

.box {
width: 100%;
overflow: hidden;
border: 1px solid #aaa;
border-bottom:0;
box-sizing: border-box;
}

#dy {
width: 50%;
float: left;
overflow: hidden;
text-align: center;
line-height: 50px;
border-right: 1px solid #aaa;box-sizing: border-box;
cursor: pointer;
}

#qc {
width: 50%;
float: left;
overflow: hidden;
text-align: center;
line-height: 50px;box-sizing: border-box;
cursor: pointer;
}

ul {
width: 100%;
box-sizing: border-box;
overflow: hidden;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
}

ul li {
width: 25%;
float: left;
text-align: center;
line-height: 60px;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
box-sizing: border-box;
cursor: pointer;
}
</style>
</head>

<body>
<div class="main">
<input type="text" id="display" readonly="readonly"/>
<div class="box">
<div id="dy" onclick="eva()">=</div>
<div id="qc" onclick="clearNum()">清除</div>
</div>
<ul>
<li id="7" onclick="inputnum(this.id)">7</li>
<li id="8" onclick="inputnum(this.id)">8</li>
<li id="9" onclick="inputnum(this.id)">9</li>
<li id="+" onclick="inputnum(this.id)">+</li>
<li id="4" onclick="inputnum(this.id)">4</li>
<li id="5" onclick="inputnum(this.id)">5</li>
<li id="6" onclick="inputnum(this.id)">6</li>
<li id="(" onclick="inputnum(this.id)">（</li>
<li id="1" onclick="inputnum(this.id)">1</li>
<li id="2" onclick="inputnum(this.id)">2</li>
<li id="3" onclick="inputnum(this.id)">3</li>
<li id=")" onclick="inputnum(this.id)">）</li>
<li id="0" onclick="inputnum(this.id)">0</li>
<li id="*" onclick="inputnum(this.id)">&#215</li>
<li id="/" onclick="inputnum(this.id)">&#247</li>
<li id="-" onclick="inputnum(this.id)">&#8722</li>
</ul>
</div>

<script>
var dis = document.getElementById('display');
function inputnum(num) {
dis.value += document.getElementById(num).id;
}

function eva() {
dis.value = (eval(document.getElementById("display").value))==null? null:eval(document.getElementById("display").value);
}

function clearNum() {
dis.value = null;
}
</script>
</body>

</html>

 

posted @ 2017-08-16 13:46  ☆怺ぐ恆☆  阅读(284)  评论(0)    收藏  举报