<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.all{
height: 514px;
width: 400px;
border-radius: 20px;
margin:0 auto;
margin-top: 100px;
background-color: rgb(255,123,17);
}
.xiansi,.div1,.div2,.div3,.div4,.div5{
float: left;
height: 80px;
width: 400px;
}
.xiansi{
height: 80px;
width: 340px;
font-size: 20px;
text-overflow:clip;
white-space:nowrap;
overflow:hidden;
border-radius: 20px;
margin-bottom: 15px;
text-align: center;
line-height: 80px;
margin-left:30px;
margin-top: 15px;
background-color: rgb(109,189,240);
}
.div4{
width: 288px;
}
.div5{
border: none;
width: 288px;
}
.div0{
float: left;
text-align: center;
line-height: 70px;
font-size: 40px;
margin-top:4px;
margin-left: 24px;
color: rgb(255,255,255);
height: 70px;
width: 70px;
border-radius: 20px;
background-color: rgb(215,25,2);
}
.zero{
width: 164px;
float: left;
text-align: center;
line-height: 70px;
font-size: 40px;
margin-top:4px;
margin-left: 24px;
color: rgb(255,255,255);
height: 70px;
border-radius: 20px;
background-color: rgb(215,25,2);
}
.end{
height: 150px;
float: right;
text-align: center;
line-height: 150px;
font-size: 40px;
margin-top:4px;
margin-right: 22px;
color: rgb(255,255,255);
width: 70px;
border-radius: 20px;
background-color: rgb(215,25,2);
}
</style>
</head>
<body>
<div class="all">
<div class="xiansi">
</div>
<div class="div1">
<div class="div0" id="clear">C</div>
<div class="div0" id="cu">÷</div>
<div class="div0" id="chen">×</div>
<div class="div0" id="sc">←</div>
</div>
<div class="div2">
<div class="div0" id="seven">7</div>
<div class="div0" id="eight">8</div>
<div class="div0" id="nine">9</div>
<div class="div0" id="lis">－</div>
</div>
<div class="div3">
<div class="div0" id="four">4</div>
<div class="div0" id="five">5</div>
<div class="div0" id="sex">6</div>
<div class="div0" id="and">＋</div>
</div>
<div id="end" class="end">＝</div>
<div class="div4">
<div class="div0" id="one">1</div>
<div class="div0" id="two">2</div>
<div class="div0" id="three">3</div>
</div>
<div class="div5">
<div id='zero' class="zero">0</div>
<div class="div0" id="point">·</div>
</div>
</div>
<script>
var num=0;
var numb_1=0;
var numb_2=0;
var numb_3=0;
var index_1=0;
var index_2=0;
var index_3=0;
var index_4=0;
var arr=new Array();
function fn(n){
if(n=='clear'){//全部清除。
numb_1=0;
arr=[];
num=0;
numb_1=0;
numb_2=0;
numb_3=0;
index_1=0;
index_2=0;
index_3=0;
index_4=0;
num=arr.join('');
document.querySelector('.xiansi').innerHTML=num;
}else{
if(n=='sc'){//删除最后一个
arr.pop();
num=arr.join('');
document.querySelector('.xiansi').innerHTML=num;
}else{
if(n=='+'){//////////加法运算
if(index_1==1){
num=arr.join('');
numb_1+=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(1);
index_3=0;
index_2=0;
index_4=0;
arr=[];
}else{
if(index_2==1){
index_1++;
num=arr.join('');
numb_1-=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(5);
index_2=0;
index_3=0;
index_4=0;
arr=[];
}else{
if(index_3==1){
index_1++;
num=arr.join('');
numb_1*=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(10);
index_3=0;
index_2=0;
index_4=0;
arr=[];
}else{
if(index_4==1){
index_1++;
num=arr.join('');
numb_1/=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(17);
index_4=0;
index_2=0;
index_3=0;
arr=[];
}else{
index_1++;
num=arr.join('');
numb_1+=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(0);
index_2=0;
index_3=0;
index_4=0;
arr=[];
};
};
};
};
}else{
if(n=='-'){////////减法运算
if(index_1==1){
index_2++;
num=arr.join('');
numb_1+=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(3);
index_1=0;
index_3=0;
index_4=0;
arr=[];
}else{
if(index_2==1){
num=arr.join('');
numb_1-=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(4);
index_1=0;
index_3=0;
index_4=0;
arr=[];
}else{
if(index_3==1){
index_2++;
num=arr.join('');
numb_1*=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(11);
index_1=0;
index_3=0;
index_4=0;
arr=[];
}else{
if(index_4==1){
index_2++;
num=arr.join('');
numb_1/=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(18);
index_4=0;
index_1=0;
index_3=0;
arr=[];
}else{
index_2++;
num=arr.join('');
numb_1=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(2);
index_1=0;
index_3=0;
index_4=0;
arr=[];
};
};
};
};
}else{
if(n=='×'){//////////乘法运算
if(index_1==1){
index_3++;
num=arr.join('');
numb_1+=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(6);
index_1=0;
index_2=0;
index_4=0;
arr=[];
}else{
if(index_2==1){
index_3++;
num=arr.join('');
numb_1-=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(7);
index_1=0;
index_2=0;
index_4=0;
arr=[];
}else{
if(index_3==1){
num=arr.join('');
numb_1*=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(8);
index_1=0;
index_2=0;
index_4=0;
arr=[];
}else{
if(index_4==1){
index_3++;
num=arr.join('');
numb_1/=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(19);
index_4=0;
index_2=0;
index_1=0;
arr=[];
}else{
index_3++;
num=arr.join('');
numb_1=parseFloat(num)||1;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(9);
index_1=0;
index_2=0;
index_4=0;
arr=[];
};
};
};
};
}else{
if(n=='÷'){//////////除法运算
if(index_1==1){
index_4++;
num=arr.join('');
numb_1+=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(12);
index_1=0;
index_2=0;
index_3=0;
arr=[];
}else{
if(index_2==1){
index_4++;
num=arr.join('');
numb_1-=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(13);
index_1=0;
index_2=0;
index_3=0;
arr=[];
}else{
if(index_3==1){
index_4++;
num=arr.join('');
numb_1*=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(14);
index_1=0;
index_2=0;
index_3=0;
arr=[];
}else{
if(index_4==1){
num=arr.join('');
numb_1/=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(15);
index_1=0;
index_2=0;
index_3=0;
arr=[];
}else{
index_4++;
num=arr.join('');
numb_1=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(16);
index_1=0;
index_2=0;
index_3=0;
arr=[];
};
};
};
};
}else{
if(n=='＝'){////////等号
if(index_1==1){
num=arr.join('');
numb_1+=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(12);
index_1=0;
index_2=0;
index_3=0;
index_4=0;
numb_1=0;
arr=[];
}else{
if(index_2==1){
num=arr.join('');
numb_1-=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(13);
index_1=0;
index_2=0;
index_3=0;
index_4=0;
numb_1=0;
arr=[];
}else{
if(index_3==1){
num=arr.join('');
numb_1*=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(14);
index_1=0;
index_2=0;
index_3=0;
index_4=0;
numb_1=0;
arr=[];
}else{
if(index_4==1){
num=arr.join('');
numb_1/=parseFloat(num)||0;
document.querySelector('.xiansi').innerHTML=numb_1;
console.log(15);
index_1=0;
index_2=0;
index_3=0;
index_4=0;
numb_1=0;
arr=[];
}else{
document.querySelector('.xiansi').innerHTML='0';
};
};
};
};
}else{
arr.push(n);
num=arr.join('');
document.querySelector('.xiansi').innerHTML=num;
};
};
};
};
};
};
};
};
document.querySelector('#one'). onclick=function(){ fn(1); };
document.querySelector('#two'). onclick=function(){ fn(2); };
document.querySelector('#three').onclick=function(){ fn(3); };
document.querySelector('#four'). onclick=function(){ fn(4); };
document.querySelector('#five'). onclick=function(){ fn(5); };
document.querySelector('#sex'). onclick=function(){ fn(6); };
document.querySelector('#seven').onclick=function(){ fn(7); };
document.querySelector('#eight').onclick=function(){ fn(8); };
document.querySelector('#nine'). onclick=function(){ fn(9); };
document.querySelector('#zero'). onclick=function(){ fn(0); };
document.querySelector('#point').onclick=function(){ fn('.');};
//清除全部：
document.querySelector('#clear').onclick=function(){
fn('clear');
}
//删除一个：
document.querySelector('#sc').onclick=function(){
fn('sc');
}
//运算：
//加：
document.querySelector('#and').onclick=function(){
fn('+');
};
//减：
document.querySelector('#lis').onclick=function(){
fn('-');
};
//乘：
document.querySelector('#chen').onclick=function(){
fn('×');
};
//除：
document.querySelector('#cu').onclick=function(){
fn('÷');
};
//等于：
document.querySelector('#end').onclick=function(){
fn('＝');
}
</script>
</body>
</html>
