2018-11-16

                                                  计算器修改版

45039a0282cee5783a0f7100c62365c87ffb83db.gif

99456fd05866423e6a69bf4516e432b997a9d4a2.gif

dfd6251f4e524918c457a65290f9ca460b5751ef.gif

html部分
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8">
<link id="link" rel="stylesheet" type="text/css" href="css.css">
</head>
<body onselectstart="return false;" id="body">
<div class="wait" id="wait">
<div class="radious1"></div>
<div class="radious2"></div>
<div class="radious3"></div>
<div class="radious4"></div>
<div class="radious5"></div>
<div class="radious6"></div>
<div class="radious7"></div>
<div class="radious8"></div>
<div class="radious9"></div>
</div>
<div id="container">
<div id="head">
<div id="left">计算器</div>
<div id="right">
<span id="small">-</span>
<span id="big">□</span>
<span id="close">×</span>
</div>
</div>
<div id="look">
<div id="top" class="top"></div>
<div id="bottom"></div>
</div>
<div id="btn">
<div>
<span id="percent">(</span>
<span id="radical">)</span>
<span id="square">X^2</span>
<span id="reciprocal">1/X</span>
</div>
<div>
<span id="clearNow">CE</span>
<span id="clearAll">C</span>
<span id="clear">清除</span>
<span id="expext">/</span>
</div>
<div>
<span id="num7">7</span>
<span id="num8">8</span>
<span id="num9">9</span>
<span id="ride">×</span>
</div>
<div>
<span id="num4">4</span>
<span id="num5">5</span>
<span id="num6">6</span>
<span id="reduce">-</span>
</div>
<div>
<span id="num1">1</span>
<span id="num2">2</span>
<span id="num3">3</span>
<span id="plus">+</span>
</div>
<div>
<span id="fabs">±</span>
<span id="num0">0</span>
<span id="dian">.</span>
<span id="result">=</span>
</div>
</div>
</div>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

css部分

*{
padding: 0;
margin: 0;
}

container{

width: 600px;
height: 780px;
margin: 0 auto;
border: 1px solid #4ac36e;
box-shadow: 8px 8px #7955481f;
position: relative;
background-color: #e0e0e082;

}

head{

width: 100%;
height: 5%;

}

left{

float: left;
width: 20%;
height: 40px;
line-height: 40px;
text-align: center;

}

right{

float: right;

}

right span{

height: 40px;
line-height: 40px;
text-align: center;
font-size: 26px;
width: 50px;
display: inline-block;
cursor: pointer;

}

small:hover,

big:hover{

background-color: #e0e0e0;

}

close:hover{

background-color: red;

}

look{

width: 100%;
height: 150px;

}

top{

height: 50px;
line-height: 50px;
text-align: right;
font-size: 16px;
clear: both;

}

bottom{

height: 100px;
line-height: 100px;
text-align: right;
font-size: 34px;

}

btn{

width: 100%;
height: 610px;

}

btn div span{

width: 24%;
height: 97px;
display: inline-block;
line-height: 100px;
text-align: center;
border: 1px solid #9e9e9e3d;
cursor: pointer;
font-size: 26px;

}

reciprocal:hover,

percent:hover,

radical:hover,

square:hover,

clearNow:hover,

clearAll:hover,

clear:hover,

fabs:hover,

dian:hover,

num0:hover,

num1:hover,

num2:hover,

num3:hover,

num4:hover,

num5:hover,

num6:hover,

num7:hover,

num8:hover,

num9:hover,

percent:hover{

background-color: #9e9e9e6e;

}

expext:hover,

ride:hover,

reduce:hover,

plus:hover,

result:hover{

background-color: #4cacaf42;

}

btn div span:active{

opacity: 0.6;

}

wait{

width: 300px;
height: 300px;
margin: 250px auto;
position: relative;
display: none;

}
.wait div{
background-color: #fff;
border: 1px solid #fff;
position: absolute;
border-radius: 50%;
}
.radious5{
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
animation: turnSmall 2s infinite;
animation-delay: -0.5s;
}
.radious1,
.radious2,
.radious3,
.radious4,
.radious6,
.radious7,
.radious8,
.radious9{
width: 30px;
height: 30px;
position: absolute;
margin: 140px 140px;
}
.radious1{
animation: turn1 2s infinite;
}
.radious2{
animation: turn2 2s infinite;
}
.radious3{
animation: turn3 2s infinite;
}
.radious4{
animation: turn4 2s infinite;
}
.radious6{
animation: turn6 2s infinite;
}
.radious7{
animation: turn7 2s infinite;
}
.radious8{
animation: turn8 2s infinite;
}
.radious9{
animation: turn9 2s infinite;
}
@keyframes turnSmall{
0%,15%,30%{transform: scale(1);}
45%,60%,75%{transform: scale(0.3);}
90%,100%{transform: scale(1);}
}
@keyframes turn1{
0% {top:0px;}
50% {top:-100px;}
100% {top:0px;}
}
@keyframes turn2{
0% {top:0px; left: 0px}
50% {top:-80px; left: -80px}
100% {top:0px; left: 0px;}
}
@keyframes turn3{
0% {top:0px; left: 0px}
50% {top:80px; left: 80px;}
100% {top:0px; left: 0px}
}
@keyframes turn4{
0% {top:0px; left: 0px;}
50% {top:-80px; left: 80px;}
100% {top:0px; left: 0px;}
}

@keyframes turn6{
0% {top:0px; left: 0px;}
50% {top:80px; left: -80px;}
100% {top:0px; left: 0px;}
}

@keyframes turn7{
0% {top:0px;}
50% {top:100px;}
100% {top:0px;}
}

@keyframes turn8{
0% {left: 0px;}
50% {left: 100px;}
100% {left: 0px;}
}

@keyframes turn9{
0% {left: 0px;}
50% {left: -100px;}
100% {left: 0px;}
}

js部分
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id; //判断id是否为字符串
}//封装一个代替getElementById()的方法
var close = byId('close');
var container = byId('container');
var p = false; //判断放大缩小
var big = byId('big');
var link = byId('link');
var small = byId('small');
var wait = byId('wait');
var body = byId('body');
var look = byId('look').getElementsByTagName('div'); //绑定显示界面
var btn = byId('btn').getElementsByTagName('span'); //绑定按钮

for(let i =0;i<btn.length-1;i++){
btn[i].onclick = function(){
if(i==2){
if(!isNaN(look[1].innerHTML)){
look[0].innerHTML = look[1].innerHTML+'^2';
look[1].innerHTML = Number(look[1].innerHTML)*Number(look[1].innerHTML);
}
}
else if(i==3){
if(!isNaN(look[1].innerHTML)){
look[0].innerHTML = '1/'+look[1].innerHTML;
look[1].innerHTML = 1/Number(look[1].innerHTML);
}
}
else if(i==4){
look[1].innerHTML='';
}
else if(i==5){
look[0].innerHTML='';
look[1].innerHTML='';
}
else if(i==6){
if(look[1].innerHTML.length==1){
look[1].innerHTML='0';
}
else{
look[1].innerHTML = look[1].innerHTML.slice(0,-1);
}
}
else if(i==20){
if(!isNaN(look[1].innerHTML)){
look[1].innerHTML = Math.abs(look[1].innerHTML);
}
}
else{
if(look[1].innerHTML=='0'){
look[1].innerHTML = btn[i].innerHTML;
}
else{
look[1].innerHTML = look[1].innerHTML + btn[i].innerHTML;
}
}
}
} //绑定事件 let 解决闭包

close.onclick = function(){
if(confirm("确定吗关闭计算器吗")){
container.style.display = 'none';
}
}
small.onclick = function(){
wait.style.display = "block";
body.style.background = "red";
container.style.display = "none";
}
wait.onclick = function(){
wait.style.display = "none";
container.style.display = "block";
body.style.background = "#fff";
}
//切换css样式
big.onclick = function(){
if(p == false){
link.href = 'css2.css';
p = true
}
else{
link.href = 'css.css';
p = false;
}
}

result.onclick =function(){
look[0].innerHTML = look[1].innerHTML;
var infixExp = [] //中缀表达式
var suffixExp = []; //后缀表达式
var opeStack = []; //临时
//处理中缀

+function toInfix(){
    var demo = [];
    for(var i =0;i<look[1].innerHTML.length;i++){
        if((look[1].innerHTML[i]>='0'&&look[1].innerHTML[i]<='9')||(look[1].innerHTML[i]=='.')){
            demo = demo + look[1].innerHTML[i];
            if(i==look[1].innerHTML.length-1){
                infixExp.push(demo);
            }
        }
        else if((look[1].innerHTML[i]=='(')||(look[1].innerHTML[i]==')')){
            if(look[1].innerHTML[i]=='('){
                if(demo!=''){
                    infixExp.push(demo);
                }
                infixExp.push('(');
                demo = '';
                
            }
            else{
                if(demo!=''){
                    infixExp.push(demo);
                }
                infixExp.push(')');
                demo = '';
                
            }
        }
        else{
            infixExp.push(demo);
            demo = '';
            infixExp.push(look[1].innerHTML[i]);
        }
        console.log(infixExp)
    }

}();

console.log(infixExp)

//中缀转后缀
+function to(){
    for(var i =0;i<infixExp.length;i++){
        if(!isNaN(infixExp[i])){
            suffixExp.push(infixExp[i]);  //当为数字时直接插入后缀
        }
        if((infixExp[i]=='+')||(infixExp[i]=='-')||(infixExp[i]=='×')||(infixExp[i]=='/')){
            if(opeStack.length==0){
                opeStack.push(infixExp[i]);
            }
            else if((opeStack[opeStack.length-1]=='+'||opeStack[opeStack.length-1]=='-')&&(infixExp[i]=='×'||infixExp[i]=='/')){
                opeStack.push(infixExp[i]);
            }
            else{
                suffixExp.push(opeStack[opeStack.length-1]);
                opeStack.pop();
                opeStack.push(infixExp[i]);
            }
        }
        //遇见括号
        if(infixExp[i]=='('){
            var j = i + 1;
            opeStack.push(infixExp[i]);
            while(infixExp[j]!=')'){
                if(!isNaN(infixExp[j])){
                    suffixExp.push(infixExp[j]);  //当为数字时直接插入后缀
                }
                else if((opeStack[opeStack.length-1]=='(')&&((infixExp[j]=='+')||(infixExp[j]=='-')||(infixExp[j]=='×')||(infixExp[j]=='/'))){
                    opeStack.push(infixExp[j]);
                }
                else if((opeStack[opeStack.length-1]!='(')&&((infixExp[j]=='+')||(infixExp[j]=='-')||(infixExp[j]=='×')||(infixExp[j]=='/'))){
                    if((opeStack[opeStack.length-1]=='+'||opeStack[opeStack.length-1]=='-')&&(infixExp[j]=='×'||infixExp[j]=='/')){
                        opeStack.push(infixExp[j]);
                    }
                    else{
                        suffixExp.push(opeStack[opeStack.length-1]);
                        opeStack.pop();
                        opeStack.push(infixExp[j]);
                    }
                }
                j++;
            }
            
            while(opeStack[opeStack.length-1]!='('){
                var cur = opeStack.pop();
                suffixExp.push(cur);
            }
            i = j+1;
            opeStack.pop();
        }

        if(i>=(infixExp.length-1)){
            for(var j = opeStack.length-1;j>=0;j--){
                suffixExp.push(opeStack[j]);
            }
        }
    }
}();
console.log(opeStack)
console.log(suffixExp)


//计算结果

+function toResult(){
    var newOpeStack = []; //临时
    for(var i =0;i<suffixExp.length;i++){
         if(!isNaN(suffixExp[i])){
            newOpeStack.push(suffixExp[i]);
        }
        else{
            var strRight = newOpeStack.pop();
            var strLeft = newOpeStack.pop();
      
            

            switch (suffixExp[i]) {
                case '+':
                    newOpeStack.push(Number(strLeft)+Number(strRight));
                    break;
                case '-':
                    newOpeStack.push(Number(strLeft)-Number(strRight));
                    break;
                case '×':
                    newOpeStack.push(Number(strLeft)*Number(strRight));
                    break;
                case '/':
                    newOpeStack.push(Number(strLeft)/Number(strRight));
                    break;
            }
        }
    }
         look[1].innerHTML = '';
        for(var i =0;i<=newOpeStack.length;i++){
            look[1].innerHTML = newOpeStack.pop()+look[1].innerHTML;
        }
}();

}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,258评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,335评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,225评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,126评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,140评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,098评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,018评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,857评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,298评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,518评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,678评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,400评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,993评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,638评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,801评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,661评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,558评论 2赞 352