计算器
css
*{
box-sizing: border-box;
}
.box{
width: 400px;
margin: 0 auto;
height: 400px;
background-color: gray;
}
.top{
width: 260px;
margin: 0 auto;
}
.top input{
width: 260px;
margin: 0 auto;
height: 50px;
font-size: 20px;
padding-left: 10px;
outline: medium;
margin-top: 10px;
}
.main{
width: 400px;
background-color: green;
height:300px;
display: flex;
flex-wrap: wrap;
align-content:flex-start;
margin-top: 20px;
}
.main button{
width: 80px;
height: 40px;
margin-left: 15px;
margin-top: 15px;
}
html
<div class="box">
<div class="top">
<input type="text" id="res">
</div>
<div class="main">
<button onclick="che('')">C</button>
<button onclick="tuige()">back</button>
<button onclick="num(1)">1</button>
<button onclick="num(2)">2</button>
<button onclick="num(3)">3</button>
<button onclick="num(4)">4</button>
<button onclick="num(5)">5</button>
<button onclick="num(6)">6</button>
<button onclick="num(7)">7</button>
<button onclick="num(8)">8</button>
<button onclick="num(9)">9</button>
<button onclick="num(0)">0</button>
<button onclick="cal('+')">+</button>
<button onclick="cal('-')">-</button>
<button onclick="cal('*')">*</button>
<button onclick="cal('/')">/</button>
<button onclick="res('=')">=</button>
</div>
</div>
js
function num(shuzi){
let _res=document.getElementById('res')
_res.value=_res.value+shuzi
}
function cal(par){
let _res=document.getElementById('res')
_res.value=_res.value+par
}
// =======结果======
function res(r){
let _res=document.getElementById('res')
_res.value=_res.value+"="+eval(_res.value)
}
// ====清空=====
function che(){
let _res=document.getElementById('res')
_res.value=""
}
// ====退格=====
function tuige(){
let _res=document.getElementById('res')
_res.value= _res.value.substring(0, _res.value.length-1)
}