<html>
<head>
<style>
td {
width:100px;
height:40px;
text-align:center;
}
input{
width:100%;
height:100%;
}
</style>
<script>
var num;
function Cal(n) {
num = document.getElementById("cal");
num.innerHTML += n;
}
function Clear() {
var div = document.getElementById("cal");
var result = document.getElementById("result");
div.innerHTML = "";
result.innerHTML = "";
}
function Back() {
var div = document.getElementById("cal");
div.innerHTML = div.innerHTML.substring(0, div.innerHTML.length - 1);
}
function Answer() {
var div = document.getElementById("result");
div.innerHTML = eval(num.innerHTML);
}
</script>
</head>
<body>
<h1>계산기</h1>
<table border=2 width="50%">
<tr>
<td colspan="3">
<div id="cal"></div>
</td>
<td colspan="2">
<div id="result"></div>
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="Cal(7)">
</td>
<td>
<input type="button" value="8" onclick="Cal(8)" >
</td>
<td>
<input type="button" value="9" onclick="Cal(9)">
</td>
<td>
<input type="button" value="+" onclick="Cal('+')">
</td>
<td>
<input type="button" value="Clear" onclick="Clear()">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="Cal(4)">
</td>
<td>
<input type="button" value="5" onclick="Cal(5)">
</td>
<td>
<input type="button" value="6" onclick="Cal(6)">
</td>
<td>
<input type="button" value="-" onclick="Cal('-')">
</td>
<td>
<input type="button" value="Back" onclick="Back()">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="Cal(1)">
</td>
<td>
<input type="button" value="2" onclick="Cal(2)">
</td>
<td>
<input type="button" value="3" onclick="Cal(3)">
</td>
<td>
<input type="button" value="*" onclick="Cal('*')">
</td>
<td>
<input type="button" value="(" onclick="Cal('(')">
</td>
</tr>
<tr>
<td>
<input type="button" value="0" onclick="Cal(0)">
</td>
<td>
<input type="button" value="." onclick="Cal('.')">
</td>
<td>
<input type="button" value="/" onclick="Cal('/')">
</td>
<td>
<input type="button" value=")" onclick="Cal(')')">
</td>
<td>
<input type="button" value="=" onclick="Answer()">
</td>
</tr>
</table>
</body>
</html>
'javascript' 카테고리의 다른 글
| with 키워드 (0) | 2013.11.26 |
|---|---|
| 객체와 배열의 차이 (0) | 2013.11.26 |
| 자바스크립트 (0) | 2013.10.24 |
| <a>문서연결,문서내연결,상자위치 지정,이벤트 처리방식,String객체 (0) | 2013.10.22 |
| # 노드관련 메서드 (insertBefore,replaceChild,removeChild,appendChild) (0) | 2013.10.20 |