html+css+js
代码：几行就可以搞定所有加减乘除功能噢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
background-color: #F4F7FE;
}
.box {
width: 300px;
height: 480px;
background-color: #ADD8E6;
text-align: center;
margin: 20px auto;
border-radius: 10px ;
}
input {
/* background-color: #008CBA; */
border: 0.2rem #1b91b5 solid;
width:250px ;
height: 100px;
margin-top: 10px;
margin-bottom: 20px;
font-size: 26px;//字体大小
}
button {
color: #4C4C4C;
width: 60px;//按钮格子宽高
height: 70px;
font-weight: bold;
font-family:"微软雅黑","宋体";
border: 0.1875rem #888888 outset;
text-align: center;
/* text-decoration: none; */
display: inline-block;
font-size: 26px;//按钮中字体大小
margin: 10px 15px;
/* cursor: pointer; */
border-radius: 12px;
}
button:focus,button:hover{
color:#1B91B5;
}
</style>
</head>
<body>
<div class="box">
<br /> <br />
<p>计算器</p>
<br />
<input type="text" id="inp" disabled="disabled" />
<br />
<button onclick="addStr('+')">+</button> <button onclick="addStr('-')">-</button>
<button onclick="addStr('*')">×</button> <button onclick="addStr('/')">÷</button>
<br />
<br />
<button onclick="addStr(1)">1</button> <button onclick="addStr(2)">2</button> <button
onclick="addStr(3)">3</button> <button onclick="cls()">C</button>
<br />
<br />
<button onclick="addStr(4)">4</button> <button onclick="addStr(5)">5</button> <button
onclick="addStr(6)">6</button> <button onclick="back1()">←</button>
<br />
<br />
<button onclick="addStr(7)">7</button> <button onclick="addStr(8)">8</button> <button
onclick="addStr(9)">9</button> <button onclick="calc()">=</button>
<br />
</div>
<script>
//添加字符
function addStr(s) {
var inp = document.getElementById("inp");
inp.value = inp.value + s;
}
//计算结果
function calc() {
var inp = document.getElementById("inp");
val = eval(inp.value);
inp.value = val;
}
//清除
function cls() {
var inp = document.getElementById("inp");
inp.value = "";
}
//返回
function back1() {
var inp = document.getElementById("inp");
var str = inp.value.substr(0, inp.value.length - 1);
inp.value = str;
}
</script>
</body>
</html>