html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.box {
height: 570px;
width: 500px;
background-color: deeppink;
margin: auto;
border-radius: 10px;
border: 3px solid black;
}
.dtable {
height: 560px;
width: 460px;
margin: auto;
}
#txt {
height: 70px;
width: 300px;
font-size: 50px;
font-family: "黑体";
font-weight: 200px;
border: 2px solid black;
}
td {
text-align: center;
font-size: 20px;
font-weight: 200;
margin: auto;
padding: auto;
}
.point {
height: 80px;
width: 97px;
text-align: center;
padding: auto;
margin: auto;
border-radius: 10px;
border: 2px solid black;
background-color: hotpink;
cursor: pointer;
font-size: 60px;
font-family: "黑体";
}
</style>
<body>
<div class="box">
<table class="dtable">
<tr>
<td colspan="3" class="rdt">
<input type="text" id="txt" value="" />
</td>
<td>
<img src="img/rabbit.gif" alt="">
</td>
</tr>
<tr>
<td>
<div class="point" onclick="fun('9')">9</div>
</td>
<td>
<div class="point" onclick="fun('8')">8</div>
</td>
<td>
<div class="point" onclick="fun('7')">7</div>
</td>
<td>
<div class="point" onclick="fun('+')">+</div>
</td>
</tr>
<tr>
<td>
<div class="point" onclick="fun('6')">6</div>
</td>
<td>
<div class="point" onclick="fun('5')">5</div>
</td>
<td>
<div class="point" onclick="fun('4')">4</div>
</td>
<td>
<div class="point" onclick="fun('-')">-</div>
</td>
</tr>
<tr>
<td>
<div class="point" onclick="fun('3')">3</div>
</td>
<td>
<div class="point" onclick="fun('2')">2</div>
</td>
<td>
<div class="point" onclick="fun('1')">1</div>
</td>
<td>
<div class="point" onclick="fun('*')">×</div>
</td>
</tr>
<tr>
<td>
<div class="point" onclick="fun('0')">0</div>
</td>
<td>
<div class="point" onclick="fun('C')">C</div>
</td>
<td>
<div class="point" onclick="fun('=')">=</div>
</td>
<td>
<div class="point" onclick="fun('/')">÷</div>
</td>
</tr>
</table>
</div>
<script>
var s = '';
function fun(value) {
var txt = document.getElementById("txt");
if (value === 'C') {
s = '';
} else if (value === '=') {
s = eval(s);
} else {
s += value;
}
txt.value = s;
// alert(s);
}
</script>
</body>
</html>