html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#a {
width: 400px;
height: 400px;
overflow: hidden;
background-color: #6c6c6c;
}
#a>input {
display: block;
width: 280px;
height: 60px;
margin: auto;
margin-top: 10px;
}
#c{
width: 380px;
height: 300px;
background-color:green;
margin: auto;
margin-top: 24px;
}
#c>button{
margin: 10px;
width: 100px;
height: 40px;
font-size: 26px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="a1" id="a">
<input type="text" id="res"/>
<div id="c">
<button type="button" onclick="calc(0)">0</button>
<button type="button" onclick="calc(1)">1</button>
<button type="button" onclick="calc(2)">2</button>
<button type="button" onclick="calc(3)">3</button>
<button type="button" onclick="calc(4)">4</button>
<button type="button" onclick="calc(5)">5</button>
<button type="button" onclick="calc(6)">6</button>
<button type="button" onclick="calc(7)">7</button>
<button type="button" onclick="calc(8)">8</button>
<button type="button" onclick="calc(9)">9</button>
<button type="button" onclick="calc('+')">+</button>
<button type="button" onclick="calc('-')">-</button>
<button type="button" onclick="calc('*')">*</button>
<button type="button" onclick="calc('/')">/</button>
<button type="button" onclick="dy()">=</button>
</div>
</div>
<script type="text/javascript">
var res=document.getElementById('res');
function calc(param){
res.value=res.value+param;
}
function dy(){
res.value=eval(res.value);
}
</script>
</body>
</html>
效果展示：
重置可以清除计算器内的内容，同时也可以根据自己的需求添加需要的按钮，有兴趣的小伙伴去试试哦 ！
本文转载自: https://blog.csdn.net/qq_69555866/article/details/125266632
版权归原作者 意中人Crush 所有， 如有侵权，请联系我们删除。
版权归原作者 意中人Crush 所有， 如有侵权，请联系我们删除。