<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
100%;
height: 100%;
font-size: 14px;
font-family: "微软雅黑";
}
#box{
260px;
margin: 100px auto;
}
#box #top{
height: 50px;
border: 1px solid #666666;
}
ul{
float: left;
}
ul li{
float: left;
list-style: none;
50px;
height: 50px;
background: #CCCCCC;
color: #fff;
text-align: center;
line-height: 50px;
border: 1px solid #008000;
}
ul #li1{
50px;
height: 102px;
}
ul #li2{
102px;
height: 50px;
}
#list{
margin-top: -52px;
}
</style>
</head>
<body>
<div id="jisuanji">
<div id="box">
<div id="top">
</div>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
<li>/</li>
<li>%</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li id="li3">C</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>-</li>
<li id="li1">=</li>
</ul>
<div style="clear: both;"></div>
<ul id="list">
<li id="li2">0</li>
<li>.</li>
<li>+</li>
</ul>
</div>
<script type="text/javascript">
var otext = document.getElementById("top");
var oLi = document.getElementsByTagName('li');
var li1 = document.getElementById("li1");
var li3 = document.getElementById("li3");
for (var i=0;i<oLi.length;i++) {
oLi[i].onclick = function(){
otext.innerHTML += this.innerHTML;
}
}
li1.onclick = function(){
otext.innerHTML = eval(otext.innerHTML )
}
li3.onclick = function(){
otext.innerHTML ='';
}
</script>
</div>
</body>
</html>