<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
* {
margin: 0;
padding: 0;
}
.button {
width: 50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;/*鼠标指向button时指针为一只手*/
background: #607d8b;
border: none;
color: white;
}
.doIt {
width: 210px;
margin: 5px;
font-size: 25px;
padding: 5px;
border: none;
}
.main {
position: absolute;/*通过left，right，top，bottom等元素进行绝对的定位*/
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);/*xy方向移动各百分之50，实现居中*/
}
html {
background: linear-gradient(to right, aqua , greenyellow );/*linear-gradient从右到左颜色的渐变*/
height: 100%;
}
</style>
<script>
function insert(num) {
document.number.doIt.value = document.number.doIt.value + num;
}
//给insert按钮传递一个方法，当点击的时候就会完成数据的输入
function equal() {
var exp = document.number.doIt.value;
if (exp) {
var eval2 = eval(document.number.doIt.value);
// eval() 执行括号内的语句 , 记录结果
var number = eval2.toString().indexOf(".");
//indexOf检查toString字符串 如果要检索的字符串值（.）没有出现，则该方法返回 -1。
if (number!==-1){
// 如果number不等于-1，则有小数，保留五位小数
eval2=eval2.toString().substring(0,number+6);
document.number.doIt.value=eval2;
}else {
// 如果无小数，直接赋值输出
document.number.doIt.value=eval2;
}
}
}
function Mclean() {
document.number.doIt.value = null;
}
//清楚计算框中的所有内容
function back() {
var exp = document.number.doIt.value;
document.number.doIt.value = exp.substring( 0,exp.length - 1);
//substring() 方法用于提取字符串中介于两个指定下标之间的字符
// 截取字符串,从右到左逐步删除输入的一个字符
}
</script>
</head>
<body>
<div class="main">
<form name="number">
<input class="doIt" name="doIt">
</form>
<table>
<tr>
<td><input type="button" class="button" value="C" onclick="Mclean()"></td>
<td><input type="button" class="button" value="<" onclick="back()"></td>
<td><input type="button" class="button" value="/" onclick="insert(‘/‘)"></td>
<td><input type="button" class="button" value="x" onclick="insert(‘*‘)"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7" onclick="insert(7)"></td>
<td><input type="button" class="button" value="8" onclick="insert(8)"></td>
<td><input type="button" class="button" value="9" onclick="insert(9)"></td>
<td><input type="button" class="button" value="-" onclick="insert(‘-‘)"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4" onclick="insert(4)"></td>
<td><input type="button" class="button" value="5" onclick="insert(5)"></td>
<td><input type="button" class="button" value="6" onclick="insert(6)"></td>
<td><input type="button" class="button" value="+" onclick="insert(‘+‘)"></td>
</tr>
<tr>
<td><input type="button" class="button" value="1" onclick="insert(1)"></td>
<td><input type="button" class="button" value="2" onclick="insert(2)"></td>
<td><input type="button" class="button" value="3" onclick="insert(3)"></td>
<td rowspan="2"><input style="height: 107px" type="button" class="button" value="=" onclick="equal()"></td>
<!/*=号纵向占两个单元格*/-->
</tr>
<tr>
<td colspan="2"><input style="width: 107px" type="button" class="button" value="0" onclick="insert(0)"></td>
<!/*0号横向占两个单元格*/>
<td><input type="button" class="button" value="." onclick="insert(‘.‘)"></td>
</tr>
</table>
</div>
</body>
</html>
原文：https://www.cnblogs.com/2618hxh/p/14155571.html