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]);  //當為數(shù)字時直接插入后綴
        }
        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]);  //當為數(shù)字時直接插入后綴
                }
                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;
        }
}();

}

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市射赛，隨后出現(xiàn)的幾起案子谭贪，更是在濱河造成了極大的恐慌师幕，老刑警劉巖，帶你破解...
沈念sama閱讀 218,204評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件中捆，死亡現(xiàn)場離奇詭異，居然都是意外死亡坊饶，警方通過查閱死者的電腦和手機泄伪，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,091評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來匿级，“玉大人蟋滴，你說我怎么就攤上這事《灰铮” “怎么了津函？”我有些...
開封第一講書人閱讀 164,548評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長孤页。經(jīng)常有香客問我尔苦，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,657評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任允坚，我火速辦了婚禮魂那，結果婚禮上，老公的妹妹穿的比我還像新娘稠项。我一直安慰自己涯雅，他們只是感情好，可當我...
茶點故事閱讀 67,689評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布展运。她就那樣靜靜地躺著活逆，像睡著了一般。火紅的嫁衣襯著肌膚如雪乐疆。梳的紋絲不亂的頭發(fā)上划乖，一...
開封第一講書人閱讀 51,554評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音挤土，去河邊找鬼琴庵。笑死，一個胖子當著我的面吹牛仰美，可吹牛的內容都是我干的迷殿。我是一名探鬼主播，決...
沈念sama閱讀 40,302評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼咖杂，長吁一口氣：“原來是場噩夢啊……” “哼庆寺！你這毒婦竟也來了？” 一聲冷哼從身側響起诉字，我...
開封第一講書人閱讀 39,216評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤懦尝，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后壤圃，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體陵霉，經(jīng)...
沈念sama閱讀 45,661評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,851評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年伍绳，在試婚紗的時候發(fā)現(xiàn)自己被綠了踊挠。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,977評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡冲杀，死狀恐怖效床，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情权谁，我是刑警寧澤剩檀，帶...
沈念sama閱讀 35,697評論 5贊 347
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站旺芽，受9級特大地震影響谨朝，放射性物質發(fā)生泄漏卤妒。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,306評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一字币、第九天我趴在偏房一處隱蔽的房頂上張望则披。院中可真熱鬧，春花似錦洗出、人聲如沸士复。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,898評論 0贊 22
一樁弒父案翩活，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽阱洪。三九已至，卻和暖如春菠镇，著一層夾襖步出監(jiān)牢的瞬間冗荸，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,019評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工利耍，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蚌本，地道東北人。一個月前我還...
沈念sama閱讀 48,138評論 3贊 370
代替公主和親
正文我出身青樓隘梨，卻偏偏與公主長得像程癌，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子轴猎，可洞房花燭夜當晚...
茶點故事閱讀 44,927評論 2贊 355