<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简版计算器</title>
<style>
.body{
width: 400px;
height: 600px;
margin: auto;
}
.jieguo{
text-align: right;
line-height: 300px;
font-size: 50px;
width: 100%;
height: 200px;
color:white;
background-color:rgba(0, 0, 0, 0.834);
}
.row1{
width: 100%;
height: 80px;
background-color:rgba(0, 0, 0, 0.834);
}
.num{
float: left;
font-size: 30px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.825);
color: white;
border-radius: 50%;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
margin-left: 17px;
}
.fuhao{
float: left;
font-size: 30px;
color: white;
background-color:orange;
text-align: auto;
border-radius: 50%;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
margin-left: 17px;
}
.AC{
float: left;
font-size: 30px;
border-radius: 50%;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
margin-left: 17px;
background-color: gainsboro;
color: black;
}
.count{
font-size: 30px;
border-radius: 50%;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
float: left;
color: white;
background-color:orange;
margin-left: 17px;
}
</style>
</head>
<body>
<div class="body">
<div class="jieguo">0</div>
<div class="row1">
<div class="AC" onclick="zero()">AC</div>
<div class="fuhao" onclick="sout()">+/-</div>
<div class="fuhao" onclick="setfh('%')">%</div>
<div class="fuhao" onclick="setfh('/')">/</div>
</div>
<div class="row1">
<div class="num" onclick="setnum(7)">7</div>
<div class="num" onclick="setnum(8)">8</div>
<div class="num" onclick="setnum(9)">9</div>
<div class="fuhao" onclick="setfh('*')">*</div>
</div>
<div class="row1">
<div class="num" onclick="setnum(4)">4</div>
<div class="num" onclick="setnum(5)">5</div>
<div class="num" onclick="setnum(6)">6</div>
<div class="fuhao" onclick="setfh('-')">-</div>
</div>
<div class="row1">
<div class="num" onclick="setnum(1)">1</div>
<div class="num" onclick="setnum(2)">2</div>
<div class="num" onclick="setnum(3)">3</div>
<div class="fuhao" onclick="setfh('+')">+</div>
</div>
<div class="row1">
<div class="num" onclick="setnum(0)">0</div>
<div class="fuhao" onclick="setdol()">.</div>
<div class="count" onclick="jg()" >=</div>
</div>
</div>
<script>
var num1=0,num2=0,fh,loop=0,nums=0;
function setnum(num){
var jieguo = document.querySelector(".jieguo");
if(fh==undefined ){
if(loop==1){
var temp=0;
nums++;
temp=jsxs(num,nums);
num1+=temp;
}
else{
num1=num1*10+num;
}
jieguo.innerHTML = num1;
}else{
if(loop==1){
var temp=num2;
nums++;
temp=jsxs(num,nums);
num2+=temp;
}
else{
num2=num2*10+num;
}
jieguo.innerHTML = num2;
}
}
function setdol(){
var jieguo = document.querySelector(".jieguo");
loop=1;
if(fh==undefined){
jieguo.innerHTML = num1+'.';
}else{
jieguo.innerHTML = num2+'.';
}
}
function setfh(e){
loop=0;
nums=0;
var jieguo = document.querySelector(".jieguo");
fh=e;
jieguo.innerHTML = fh;
}
function jg(){
var jieguo = document.querySelector(".jieguo");
loop=0;
nums=0;
switch (fh){
case '*' :
if ((num1*num2)%1 === 0){
jieguo.innerHTML = (num1*num2);
} else {
jieguo.innerHTML = (num1*num2).toFixed(2);
}
break;
case '+' :
if ((num1+num2)%1 === 0){
jieguo.innerHTML = (num1+num2);
} else {
jieguo.innerHTML = (num1+num2).toFixed(2);
}
break;
case '-' :
if ((num1-num2)%1 === 0){
jieguo.innerHTML = (num1-num2);
} else {
jieguo.innerHTML = (num1-num2).toFixed(2);
}
break;
case '/' :
if ((num1/num2)%1 === 0){
jieguo.innerHTML = (num1/num2);
} else {
jieguo.innerHTML = (num1/num2).toFixed(2);
}
break;
case '%':
if ((num1%num2)%1 === 0){
jieguo.innerHTML = (num1%num2);
} else {
jieguo.innerHTML = (num1%num2).toFixed(2);
}
break;
}
}
function sout(){
var jieguo = document.querySelector(".jieguo");
jieguo.innerHTML = "这是个啥";
}
function zero(){
loop=0;
nums=0;
var jieguo = document.querySelector(".jieguo");
jieguo.innerHTML = 0;
num1=0;
num2=0;
fh=undefined;
}
function jsxs(num3,nums){ //计算小数
for (var i=0 ; i<nums ; i++){
num3/=10;
}
return num3;
}
</script>
</body>
</html>