<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
table.calcbuttons {
background-color: #cccccc;
border: 1px solid #000000;
}
input.calcbuttons {
margin: 3px;
width: 90%;
}
</style>
<script type="text/javascript">
function calcbutton(buttonValue) {
if (buttonValue == 'C') {
document.getElementById('calculator').value = '';
}
else {
document.getElementById('calculator').value += buttonValue;
}
}
function calculate(equation) {
var answer = eval(equation);
document.getElementById('calculator').value = answer;
}
</script>
</body>
<table class="calcbuttons" cellpadding="4">
<tr><td colspan=4><div style="text-align:center;">
<input class="inputform" id="calculator" type="text"/>
</div></td></tr>
<tr>
<td><input class="calcbuttons" type="button" value="1" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value="2" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value="3" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value='/' onclick="calcbutton(this.value);"/></td>
</tr>
<tr>
<td><input class="calcbuttons" type="button" value="4" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value="5" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value="6" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value='*' onclick="calcbutton(this.value);"/></td>
</tr>
<tr>
<td><input class="calcbuttons" type="button" value="7" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value="8" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value="9" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value='-' onclick="calcbutton(this.value);"/></td>
</tr>
<tr>
<td><input class="calcbuttons" type="button" value="0" onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value='.' onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value='C' onclick="calcbutton(this.value);"/></td>
<td><input class="calcbuttons" type="button" value='+' onclick="calcbutton(this.value);"/></td>
</tr>
<tr><td colspan=4><div style="text-align:center;">
<input class="inputform" type="button" value=' = ' onclick="calculate(document.getElementById('calculator').value);"/>
</div></td></tr>
</table>
</html>
No comments:
Post a Comment