简单的计算机
2017-04-18 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">\
*{
margin: 0;
padding: 0;
}
.wrap{
width: 200px;
height: 350px;
border-radius: 3px;
overflow: hidden;
}
.wrap .xianshi{
width: 200px;
height: 100px;
background-color: rgba(153,153,153,1);
font-size: 40px;
color: white;
position: relative;
}
.wrap .xianshi .p1{
position: absolute;
margin: 0;
right: 5px;
bottom: 0;
max-width: 180px;
max-height: 80px;
word-wrap: break-word;
overflow: hidden;
}
.wrap div{
width: 48px;
height: 48px;
background-color: gainsboro;
float: left;
line-height: 50px;
font-size: 20px;
text-align: center;
border: 1px solid gray;
}
.wrap .ling{
width: 98px;
}
.wrap .org{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<section class="wrap">
<section class="xianshi">
<p class="p1">0</p>
</section>
<div class="gongneng">AC</div>
<div class="gongneng">+/-</div>
<div class="gongneng">%</div>
<div class="org">/</div>
<div class="shu">7</div>
<div class="shu">8</div>
<div class="shu">9</div>
<div class="org">*</div>
<div class="shu">4</div>
<div class="shu">5</div>
<div class="shu">6</div>
<div class="org">-</div>
<div class="shu">1</div>
<div class="shu">2</div>
<div class="shu">3</div>
<div class="org">+</div>
<div class="ling shu">0</div>
<div class="shu">.</div>
<div class="org">=</div>
</section>
</body>
<script type="text/javascript">
var xianp=document.getElementsByClassName("p1");
var shus=document.getElementsByClassName("shu");
var orgs=document.getElementsByClassName("org");
var acs=document.getElementsByClassName("gongneng");
var arr=new Array();
var yunsuan;
var c;
var b;
var num;
for(var i=0;i<11;i++){
shus[i].onclick=function () {
arr.push(this.innerHTML);
c=arr.join("");
xianp[0].innerHTML=c;
console.log("C是"+c);
}
}
for(var j=0;j<4;j++){
orgs[j].onclick=function () {
b=c
yunsuan=this.innerHTML;
arr.length=0;
console.log("B是"+b);
}
}
orgs[4].onclick=function () {
num=eval(b+yunsuan+c);
c=num;
console.log(eval(num));
xianp[0].innerHTML=num;
}
acs[0].onclick=function () {
arr.length=0;
c=0;
b=0;
xianp[0].innerHTML=c;
}
acs[1].onclick=function () {
c=-c;
console.log(c);
xianp[0].innerHTML=c;
}
acs[2].onclick=function () {
c=c/100;
console.log(c);
xianp[0].innerHTML=c;
}
</script>
</html>
<!--鲁棒性
用户操作程序的时候的容错
-->
