<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>计算器</title>
<link rel="icon" href="images/caculate.ico" type="image/x-ico"/>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:"微软雅黑";
}
.frame{
background:#d9e4f1;
width:225px;
height:320px;
border:1px solid #ccddee;
border-radius:5px 5px 0 0;
margin:50px auto;
box-shadow:0 1px 2px #666,0 0 1px #666,0 0 1px #666;
overflow:hidden;
left:50px;
bottom:50px
}
.frame:hover{
background:#ccddee;
}
.header{
font-size:12px;
background:url(images/caculate.png) no-repeat 4px -3px;
margin:10px auto 5px 5px;
padding-left:28px;
}
.rt{
float:right;
height:13px;
width:27px;
border:1px solid #777;
border-radius:3px;
line-height:9px;
text-align:center;
color:white;
font-weight:bold;
margin:0 2px;
margin-top:1px;
background:#ccddee;
}
.rt:hover{
cursor:pointer;
background:#7f9cf0;
}
.mini{
font-size:30px;
line-height:9px;
text-align:center;
}
.max{
font-family:"隶书";
line-height:12px;
}
.close{
background:#d66161;
line-height:12px;
margin-right:10px;
}
.close:hover{
background:#e39f9f;
}
.nav{
width:205px;
margin:0 auto;
text-align:left;
height:20px;
line-height:20px;
background:#f2f5fa;
border:1px solid #ccddee;
border-bottom:1px solid #ddd;
}
.nav span{
display:inline-block;
width:55px;
font-size:12px;
line-height:22px;
border-radius:5px;
text-align:center;
}
.nav span:hover{
background:#dfe3ec;
border:1px solid #ccc;
height:18px;
width:53px;
color:#444;
line-height:19px;
}
u{padding:0 1px;}
.contain{
height:245px;
width:195px;
margin:0 auto;
background:linear-gradient(#f2f5fa 1%, #d9e4f1);
padding:5px;
}
.print{
width:93%;
background:linear-gradient(to top, #f2f5fa 20%, #d9e4f1);
margin:10px auto;
border:1px solid #999;
border-radius:2px;
}
.print label{
display:block;
text-align:right;
color:#333;
height:30px;
line-height:25px;
/*letter-spacing:0;*/
font-size:20px;
margin:0 5px 0 3px;
font-weight:bold;
overflow:hidden;
}
.print label:first-child{
line-height:22px;
font-size:12px;
height:20px;
}
.contain span{
margin:3px 0;
float:left;
}
.contain span button{
width:40px;
height:30px;
background:linear-gradient(to bottom, #f2f5fa 10%, #d9e4f1);
border:1px solid #999;
line-height:30px;
outline:none;
border-radius:2px;
}
.contain span button:hover{
/*background:linear-gradient(to bottom, #f0f4f9 10%, #c4d1e0);*/
background:radial-gradient( #f1cc4e,#eed88c,white);
}
.left{
float:left;
width:70%;
margin-left:7px;
}
.left span button{
margin-right:5.5px;
}
.right span{
float:right;
margin-right:7px;
}
.left .zero{
width:85px;
}
#equal{
height:66px;
font-size:16px;
}
</style>
</head>
<body>
<div class="frame" id="hide">
<div class="header">
<span>计算器</span><span class=" rt close" onclick="closeCal();">x</span><span class="rt max" onclick="maxi();">口</span><span class="mini rt" onclick="mini();">-</span>
</div>
<div class="nav">
<span>查看(<u>V</u>)</span><span>编辑(<u>E</u>)</span><span>帮助(<u>H</u>)</span>
</div>
<div class="contain">
<div class="print">
<label id="lab1"></label>
<label id="lab2">0</label>
</div>
<div class="left">
<span>
<button id="back"onclick="setval(this.id);">←</button><button id="clear"onclick="setval(this.id);">C</button><button id="divide"onclick="setval(this.id);">/</button>
</span>
<span>
<button id="1"onclick="setval(this.id);">1</button><button id="2"onclick="setval(this.id);">2</button><button id="3"onclick="setval(this.id);">3</button>
</span>
<span>
<button id="4"onclick="setval(this.id);">4</button><button id="5"onclick="setval(this.id);">5</button><button id="6"onclick="setval(this.id);">6</button>
</span>
<span>
<button id="7"onclick="setval(this.id);">7</button><button id="8"onclick="setval(this.id);">8</button><button id="9"onclick="setval(this.id);">9</button>
</span>
<span>
<button class="zero" id="0"onclick="setval(this.id);">0</button><button id="."onclick="setval(this.id);">.</button>
</span>
</div>
<div class="right">
<span>
<button id="multiply"onclick="setval(this.id);">*</button>
</span>
<span>
<button id="plus"onclick="setval(this.id);">+</button>
</span>
<span>
<button id="minus"onclick="setval(this.id);">-</button>
</span>
<span>
<button id="equal" onclick="setval(this.id);">=</button>
</span>
</div>
</div>
</div>
</body>
<script>
//字符权限值函数
function conpareBtn(n){
if(parseInt(n)>=0){
return 2;
}else{
if(n=="."){return 1;}
else if(n=="/"||n=="*"||n=="-"||n=="+"){return 0;}
else if (n=="="){return -1;}
else {return -2;}
}
}
function setval(idd){
var id=document.getElementById(idd),inh=id.innerHTML,tmp;
var lab=document.getElementById("lab1"),arr=(lab.innerHTML).split("");
var lab2=document.getElementById("lab2");
var cpi=conpareBtn(inh),cpb=conpareBtn(arr[arr.length-1]);
var check=false;
//首要条件: 如果是c按钮,清空所有数据
if (idd=="clear"||lab2.innerHTML.charAt(lab2.innerHTML.length-1)=="零"){
lab.innerHTML="";
lab2.innerHTML="0";
//return;
}
//其次: 如果不是c键,首先判断label1是否空,如果不空则判断最后元素是否是"="
else{
//排除有等号的情况
if(arr.length==0||cpb!=-1){
//两大条件:1 数字键;
// 2 判断: 如果arr空 return;
// 非空依次按优先权判断{ 1: back,2: dot,3: evaluate,4: result}
//数字键权限值最大
if(cpi==2){
(arr.length==1&&arr[0]==0)?arr=[inh]:
arr.length>1&&(arr[arr.length-1]==0&&conpareBtn(arr[arr.length-2])==0)?(arr[arr.length-1]=inh):(arr[arr.length]=inh);
}else{
//非空非数字条件下的各种判断
if(arr.length!=0){
switch(cpi){//++++++++++++++
//1.后退按钮
case -2://-------------
arr.length-=1;break;
//2.dot小数点按钮
case 1://-------------
if (cpb!=0){
//创建匿名函数 用权值函数 遍历arr ,根据权值筛选出可以加小数点的条件
tmp=(function(){
var n=[];
for(var i=arr.length-1;i>=0;i--){
if (n.length==0){
n[n.length]=conpareBtn(arr[i]);
}else{
if (n[0]==2&&n.length==1&&2==conpareBtn(arr[i])){
continue;
}else{
n[n.length]=conpareBtn(arr[i]);
}
}
}
//n 至少有一个元素,且为2
if (n.length>1){
if ((n[0]==2&&n[1]==1)||n[0]<2){return false;}
else{return true;}
}
else{return true;}
})();
console.log(tmp);
!tmp||(arr[arr.length]=inh);
}else{arr[arr.length]="0.";}
break;
//3. 运算符
case 0://--------------
cpb<2&&(arr.length-=1);
arr[arr.length]=inh;
break;
//4. 计算结果
default://判断结果是否正常,以及解决因2进制计算产生的取舍bug
cpb<2&&(arr.length-=1);
tmp=eval(arr.join(""));//num!
if (tmp=="Infinity"||isNaN(tmp)){
lab2.innerHTML="除数不能为零";
}else{
var ck=tmp.toFixed(10);//ECMa反对使用substr ,substring 不�
