计算器修改版
html部分
-
□
×
(
)
X^2
1/X
CE
C
清除
/
7
8
9
×
4
5
6
-
1
2
3
+
±
0
.
=
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
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='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-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 }