<style>
.wrapper{
width: 300px;
height: 300px;
background-color: #6c6c6c;
}
.first{
width: 100%;
height: 100px;
}
.second{
width: 100%;
height: 200px;
background-color: #11b006;
}
#kuang{
display: inline-block;
width: 200px;
height: 60px;
margin-left: 50px;
margin-top: 10px;
background-color: #fff;
outline: none;
}
button{
width: 55px;
height: 30px;
margin: 10px;
float: left;
}
</style>
<div class="wrapper">
<div class="first">
<input type="text" id="kuang">
</div>
<div class="second">
<button class="aa" οnclick="cc(1)">1</button>
<button class="aa" οnclick="cc(2)">2</button>
<button class="aa" οnclick="cc(3)">3</button>
<button class="aa" οnclick="cc(4)">4</button>
<button class="aa" οnclick="cc(5)">5</button>
<button class="aa" οnclick="cc(6)">6</button>
<button class="aa" οnclick="cc(7)">7</button>
<button class="aa" οnclick="cc(8)">8</button>
<button class="aa" οnclick="jisuan()">=</button>
<button class="aa" οnclick="cc('+')">+</button>
<button class="aa" οnclick="cc('-')">-</button>
<button class="aa" οnclick="cc('*')">*</button>
<button class="aa" οnclick="cc('/')">/</button>
</div>
<script>
let str=''; //空串,最终算式
let _kuang=document.getElementById("kuang");
function cc(params){
str+=params;
_kuang.value=str;
}
function jisuan(){
let res=eval(str); //执行算式
_kuang.value=res; //将结果放到表单
str=''; //计算结果后清空表单
}
</script>