<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
background:gray;
margin:200px auto;
200px;
height:284px;
border-radius: 6px;
}
.close{
20px;
height:20px;
border-radius: 50%;
background: red;
position: relative;
left:10px;
text-align: center;
line-height: 20px;
}
.input input{
height:50px;
194px;
border:none;
background: gray;
text-align: right;
font-size: 25px;
color: white;
}
input::-webkit-input-placeholder{
color: white;
}
table td{
45px;
height:36px;
border:1px solid black;
text-align: center;
line-height: 36px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="close">x</div>
<div class="input">
<input type="text" placeholder="0">
</div>
<table>
<tr>
<td class="clear btn">AC</td>
<td class="">+/-</td>
<td class="fuhao">%</td>
<td class="fuhao btn">+</td>
</tr>
<tr>
<td class="btns btn" id="1">1</td>
<td class="btns btn" id="2">2</td>
<td class="btns btn" id="3">3</td>
<td class="fuhao btn">/</td>
</tr>
<tr>
<td class="btns btn" id="4">4</td>
<td class="btns btn" >5</td>
<td class="btns btn" >6</td>
<td class="fuhao btn">*</td>
</tr>
<tr>
<td class="btns btn" id="7">7</td>
<td class="btns btn" id="8">8</td>
<td class="btns btn" id="9">9</td>
<td class="fuhao ">-</td>
</tr>
<tr>
<td colspan="2" class="btn">0</td>
<td class="dian btn" id="">.</td>
<td class="dengyu btn">=</td>
</tr>
</table>
</div>
<script type="text/javascript" >
var clear=fn('.clear');
var dian=fn('.dian');
var dengyu=fn('.dengyu');
var close=fn('.close');
var input=fn('.input input');
var box=fn('.box');
var fuhao=fn2('.fuhao');
var btns=fn2('.btns');
var length=btns.length;
var num1="";
var num2="";
function fn(a){
return document.querySelector(a);
}
function fn2(a){
return document.querySelectorAll(a);
}
close.onclick=function(){
box.style.display='none';
}
clear.onclick=function(){
input.value='';
input.placeholder='0';
}
dian.onclick = function(){
if (input.value.indexOf('.')<0) {
input.value = input.value + this.innerHTML;
}
else{}
}
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
input.value= input.value+this.innerHTML;
if(num1!=null)
{
num2=Number(input.value);
}
}
}
for (var i =0;i<fuhao.length;i++){
fuhao[i].index=i;
fuhao[i].onclick=function(){
a=fuhao[this.index].innerHTML;
num1=Number(input.value);
input.value="";
input.placeholder=num1;
}
}
dengyu.onclick=function(){
switch(a){
case "+": input.value=num1+num2;
break;
case "-": input.value=num1-num2;
break;
case "*": input.value=num1*num2;
break;
case "/": input.value=num1/num2;
break;
case '%':input.value= num1%num2;
break;
}
}
</script>
</body>
</html>