版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xnh_565175944/article/details/82464195
效果图:
代码:
<html>
<head>
<title>计算器</title>
<meta charset=gb2312>
<style>
*{
margin:0;
padding:0;
}
.row{
width:514px;
height:37.8px;
}
span{
width: 24%;
font-size: 18px;
line-height: 37px;
border-right: 1px solid #ebebeb;
border-top: 1px solid #ebebeb;
cursor: pointer;
text-align: center;
display: inline-block;
box-sizing: border-box;
}
span:hover{
color:white;
background:black;
opacity:0.6;
}
</style>
<script type="text/javascript">
var str;
var endStr;
function OnClickClear(){ //清空
str = document.getElementById("output");
str.value="";
}
function OnClickNumber(num){ //获取符号和数值
str = document.getElementById("output");
str.value = str.value + num;
}
function OnclickCalculate(){ //计算结果
str = document.getElementById("output");
str.value=eval(str.value);
}
</script>
</head>
<body>
<div class="Calculator">
<div class="row">
<input id="output" type="text" style="width:508px; height:35px">
</div>
<div class="row">
<span onclick="OnClickNumber('(')">(</span>
<span onclick="OnClickNumber(')')">)</span>
<span onclick="OnClickNumber('%')">%</span>
<span onclick="OnClickClear()">C</span>
</div>
<div class="row">
<span onclick="OnClickNumber(7)">7</span>
<span onclick="OnClickNumber(8)">8</span>
<span onclick="OnClickNumber(9)">9</span>
<span onclick="OnClickNumber('/')">/</span>
</div>
<div class="row">
<span onclick="OnClickNumber(4)">4</span>
<span onclick="OnClickNumber(5)">5</span>
<span onclick="OnClickNumber(6)">6</span>
<span onclick="OnClickNumber('*')">*</span>
</div>
<div class="row">
<span onclick="OnClickNumber(1)">1</span>
<span onclick="OnClickNumber(2)">2</span>
<span onclick="OnClickNumber(3)">3</span>
<span onclick="OnClickNumber('-')">-</span>
</div>
<div class="row">
<span onclick="OnClickNumber(0)">0</span>
<span onclick="OnClickNumber('.')">.</span>
<span onclick="OnclickCalculate()">=</span>
<span onclick="OnClickNumber('+')">+</span>
</div>
</div>
</body>
</html>