실행주소 : http://bboong100.cafe24.com/0828/calc1.html
풀 소스
<html>
<head>
<script type="text/javascript">
function cal(num) {
calc.txt.value += num;
}
function answer() {
calc.txt.value = eval(document.calc.txt.value);
// document.calc.txt.value 에 저장된 문자열을
// 자바스크립트코드로 실행
}
function clearcal() {
calc.txt.value = "";
// 텍스트창 초기화
}
function bs(){
calc.txt.value = calc.txt.value.substring(0, calc.txt.value.length-1);
// substring 으로 0부터 value 길이에서 -1 한 만큼의 길이를 출력한다
}
</script>
<title>계산기</title>
</head>
<body>
<form name="calc">
<table border=1 width=200px height=200px cellpadding=0 cellspacing=0>
<tr border=2> <!-- 숫자표시창 -->
<td colspan=5 align=center><input type=text name="txt" disabled></td>
</tr>
<tr height=40px> <!-- 백스페이스, C -->
<td colspan=5>
<table border=1 width=100%>
<tr align=center>
<td width=33%><input type=button value='BackSpace' style="width:100%;" onclick=bs()></td>
<td width=33%><input type=button value='C' style="width:100%;" onclick=clearcal()></td>
</tr>
</table>
</td>
</tr>
<tr align=center>
<td width=25%><input type=button value=1 onclick="cal('1')"></td>
<td width=25%><input type=button value=2 onclick="cal('2')"></td>
<td width=25%><input type=button value=3 onclick="cal('3')"></td>
<td width=25%><input type=button value='/' onclick="cal('/')"></td>
</tr>
<tr align=center>
<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>
</tr>
<tr align=center>
<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>
</tr>
<tr align=center>
<td> </td>
<td><input type=button value=0 onclick="cal('0')"></td>
<td><input type=button value='=' onclick="answer()"></td>
<td><input type=button value='-' onclick="cal('-')"></td>
</tr>
</table>
</form>
</body>
</html>
'개발개발 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 계산기 (08.30수정) (0) | 2012.08.30 |
|---|---|
| event.keycode 표 (1) | 2012.08.29 |
| 브라우저 객체 모델 BOM(Browser Object Model) (0) | 2012.08.27 |
| 문서객체모델 ( DOM, Document Object Model) (0) | 2012.08.27 |
| 문서 객체의 스타일 (0) | 2012.08.27 |
