<!DOCTYPE html>
<html>
<meta name=”content-type” content=”text/html; charset=UTF-8″>
<head>
<style type=”text/css”>
#nummessege {
height: 90px;
width: 380px;
font-size: 50px;
background-color: black;
color: white;
text-align: right;
}
table {
background-color: darkgrey;
border: 1px;
height: 350px;
width: 270px;
margin: auto;
}
.btn1 {
height: 70px;
width: 100%;
font-size: 35px;
}
</style>
<title>Calculator</title>
<script type=”text/javascript”>
var preNum;
var operate = “”;
var again = false;
function digital(nums) {
if (again == false) {
var str = document.getElementById(“nummessege”);
if (str.value != “0”)
str.value = str.value + nums;
else
str.value = nums;
}
else {
var str = document.getElementById(“nummessege”);
str.value = nums;
again = false;
}
}
function operation(val) {
preNum = document.getElementById(“nummessege”).value;
operate = val;
again = true;
}
function calculate() {
var str = document.getElementById(“nummessege”);
if (operate == “+”)
str.value = parseFloat(preNum) + parseFloat(str.value);
else if (operate == “-“)
str.value = parseFloat(preNum) – parseFloat(str.value);
else if (operate == “*”)
str.value = parseFloat(preNum) * parseFloat(str.value);
else if (operate == “/”)
str.value = parseFloat(preNum) / parseFloat(str.value);
again = true;
}
function del() {
var str = document.getElementById(“nummessege”);
str.value = str.value.substring(0, str.value.length – 1);
}
function point() {
var str = document.getElementById(“nummessege”);
if (str.value != “” && str.value.indexOf(“.”) < 0)
str.value = str.value + “.”;
}
</script>
</head>
<body bgcolor=”affff”>
<!–定义按键表格,每个按键对应一个事件触发–>
<table>
<tr>
<td colspan=”4″>
<input type=”text” id=”nummessege” value=”0″/>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”1″ id=”1″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”2″ id=”2″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”3″ id=”3″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”+” id=”add” onclick=”operation(this.value)” class=”btn1″>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”4″ id=”4″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”5″ id=”5″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”6″ id=”6″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”-” id=”sub” onclick=”operation(this.value)” class=”btn1″>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”7″ id=”7″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”8″ id=”8″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”9″ id=”9″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”*” id=”mul” onclick=”operation(this.value)” class=”btn1″>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”button” value=”0″ id=”0″ onclick=”digital(this.value)” class=”btn1″>
</td>
<td>
<input type=”button” value=”.” id=”point” onclick=”point()” class=”btn1″>
</td>
<td>
<input type=”button” value=”/” id=”division” onclick=”operation(this.value)” class=”btn1″>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”button” value=”Del” id=”clear” onclick=”del()” class=”btn1″/>
</td>
<td colspan=”2″>
<input type=”button” value=”=” id=”result” onclick=”calculate()” class=”btn1″/>
</td>
</tr>
</table>
</body>
</html>