웹마스터 팁

  2. Support
  3. 웹마스터 팁

순수 자바스크립트로 작성된 계산기...

2002.06.22 09:41

용가리

미리보기 : http://sjbiz.net/house/b.php

요즘 회사에서 넘 할일이 없어서뤼...
계산기 버튼은 플랫버튼 형식으로 꾸며 봤구여..
숫자키, 단축키(알파벳 밑줄이 단축키) 사용가능 해영..
윈도우에 있는 계산기를 그대로 구현해 봤습니당..ㅎㅎㅎ

혹시 밑에까지 다 안보실까 해서 여기다 질문 하나만 드릴께여..
혹시 php로 작성된 트리뷰 클래스 있나영??
없음 만들어야 하는데~ ^^;;
그럼 즐프 하세영~ ^_____^



우선 계산기를 띄울 HTML파일에 다음을 삽입합니다.
<script>
function open_no_title(url, w, h){
win=window.open(url, 'news', 'fullscreen=1');
win.resizeTo(w, h);
win.moveTo((screen.availWidth / 2) - (w / 2), (screen.availHeight / 2) - (h / 2));
win.focus();
}
open_no_title('caculate.htm', 260, 204); //계산기 html 파일명을 적어주세영..
</script>

그럼 계산기 HTML을..^^

<html>
<head>
<title>계산기</title>
<style>
body { margin:0px }
input { background-color:#D6D3CE; border:1px; font-FAMILY: 굴림; font-size: 9pt; }
table { color: black; font-size: 9pt; line-height: 140% }
td { color: black; font-size: 9pt; line-height: 140% }
div { font-size:9pt; font-family:굴림, 돋움, tahoma,verdana; color:#FFFFFF }

.tb{ border:2px solid #848284; border-left:2px solid #EEEEEE; border-top:2px solid #EEEEEE; background-color:#D6D3CE; }
.b1{ border:1px solid #D6D3CE; background-color:#D6D3CE; color:#0000FF; }
.b2{ border:1px solid #848284; border-left:1px solid #ffffff; border-top:1px solid #ffffff; background-color:#D6D3CE; color:#0000FF; }
.b3{ border:1px solid #848284; border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; background-color:#D6D3CE; color:#0000FF; }
</style>
<script>
var val1, val2; //값 저장
var op; //연산자 저장
var re; //결과값 저장
var valChk; //첫번째 값이 입력되었는지 검사
var opChk; //연산자를 입력하였는지 검사
var reChk; //결과를 보여줬는지 검사

var memory=0;
var fTmp1=0;
var fTmp2=0;

function init(){ //초기화
val1=0;
val2=0;
op='+';
re=0;
valChk=false;
opChk=false;
reChk=false;

fTmp1=0;
fTmp2=0;
}

function memoryJob(j){
switch (j){
  case 'clear' : //MC
   memory=0;
   mem.value='';
   break;
  case 'restore' : //MR
   if (mem.value=='M'){
    if (!valChk) val1 = memory;
    else val2 = memory;

    Display(memory);
   } break;
  case 'save' : //MS
   if (result.value!=''){
    memory=parseFloat(result.value);
    mem.value='M';
   } break;
  case 'add' : //M+
   if (result.value!=''){
    memory+=parseFloat(result.value);
    mem.value='M';
   } break;
}
}

function Display(v){ //값 출력
result.value=v;
}

function setValue(v, pos){ //값 쓰기
if (opChk || reChk){
  Display('');
  opChk=false;
  reChk=false;
}

var s=result.value;
if (s.length==32) return; //32자리 제한..

if (!valChk){
  if (pos) val1 = parseFloat(s+v) * - 1;
  else val1 = parseFloat(s+v);
}else{
  if (pos) val2 = parseFloat(s+v) * - 1;
  else val2 = parseFloat(s+v);
}

if (pos) Display(v+s);
else Display(s+v);
}

function setDot(){ //소수점 입력
var s=result.value;

  r = s.search(/./);
  if(r<0) setValue('.');
}

function setABS(){ //정수, 음수 변환
if (opChk || reChk){
  Display('');
  opChk=false;
  reChk=false;
}

var s=result.value;

r = s.search(/-/);
if(r<0) setValue('-', 1);
else{
  if (!valChk) val1 *= -1;
  else val2 *= -1;

  Display(s.substr(1, s.length));
  }
}

function setSqrt(){ //제곱근
var f=parseFloat(result.value);

if (!isNaN(f)) {
  f = Math.sqrt(f);
  if (!valChk) val1 = f;
  else val2 = f;

  Display(f);
}
}

function selfDiv(){ //1/x
var f=parseFloat(result.value);

if(fTmp2!=f) {
  val1=1; val2=f; op='/';
  compute();
  fTmp1=f;
  fTmp2=parseFloat(result.value);
} else {
  result.value=fTmp1;
  init();
}
}

function setOP(v){ //연산자 저장
if(opChk) val1 = re;

op=v;
valChk=true;
result.value='';
}

function compute(){ //연산
switch (op){
  case '+' : re = val1 + val2; break;
  case '-' : re = val1 - val2; break;
  case '*' : re = val1 * val2; break;
  case '/' : re = val1 / val2; break;
  case '%'+ ' : re = val1 % val2; break;
}
Display(re);
valChk=false;
opChk=true;
reChk=true;
}

function backProcess(){
var s=result.value;

result.value = s.substr(0, s.length - 1);
}

function keyProcess() {
switch (event.keyCode){
  case 8 : backProcess(); break;
  case 13 : compute(); break;

  case 48 : setValue(0); break;
  case 49 : setValue(1); break;
  case 50 : setValue(2); break;
  case 51 : setValue(3); break;
  case 52 : setValue(4); break;
  case 53 : setValue(5); break;
  case 54 : setValue(6); break;
  case 55 : setValue(7); break;
  case 56 : setValue(8); break;
  case 57 : setValue(9); break;

  case 96 : setValue(0); break;
  case 97 : setValue(1); break;
  case 98 : setValue(2); break;
  case 99 : setValue(3); break;
  case 100 : setValue(4); break;
  case 101 : setValue(5); break;
  case 102 : setValue(6); break;
  case 103 : setValue(7); break;
  case 104 : setValue(8); break;
  case 105 : setValue(9); break;

  case 190 : setDot(); break;
  case 110 : setDot(); break;

  case 107 : setOP('+'); break;
  case 109 : setOP('-'); break;
  case 106 : setOP('*'); break;
  case 111 : setOP('/'); break;

  case 67 : Display(''); init(); break;

  case 68 : memoryJob('clear'); break;
  case 82 : memoryJob('restore'); break;
  case 83 : memoryJob('save'); break;
  case 77 : memoryJob('add'); break;
}

if((event.ctrlKey && (event.keyCode==78 || event.keyCode==82 || event.keyCode==87)) || (event.keyCode>=112 && event.keyCode<=123)) {
  event.keyCode = 0;
  event.cancelBubble = true;
  event.returnValue = false;
}
}

document.onkeydown=keyProcess;
document.onload=init();


var bMove=false;
var x, y;

function move(){
if (event.button==1 && bMove) window.moveTo(event.screenX - x, event.screenY - y);
}

function down(){
if (event.srcElement.id=="title"){
  x=event.clientX;
  y=event.clientY;
  bMove=true;
}
}

function up(){ if (bMove) bMove=false; }
</script>
</head>

<body scroll='no' oncontextmenu='return false' onselectstart='return false'+ ' ondragstart='return false' class='tb'>
<div id='title' style='position:absolute; left:238px; top:2px; color:#ffffff;'>
<img src='cal_img/close1.jpg' onmousedown="this.src='cal_img/close2.jpg'" onmouseup='window.close();'></div>

<img src='cal_img/cal_title.jpg' id='title' onmousedown='down();' onmousemove='move();' onmouseup='up;'>

<table border='0' cellspacing='4' cellpadding='2' width='250' align='center' class='b2'>
<tr>
<td align='center' colspan='8' class='b3'>
  <input type='text' name='result' size='37' readonly>
</td>
</tr>
<tr>
<td colspan='8' style='padding:0px;'>
  <table border='1' cellspacing='2' cellpadding='2' width='100%'>
  <tr>
   <td class='b3' width='20' align='center'>
    <input type='text' name='mem' size='1' readonly style='FONT-WEIGHT:bold; color:333333; FONT-SIZE: 9pt;'></td>
   <td class='b1'> </td>
   <td align='center' class='b1' width='80'
    onmouseover="this.className='b2'" onmouseout="this.className='b1'"
    onmousedown="this.className='b3'" onmouseup="this.className='b2'"
    style='cursor:hand; color:FF0000;' onclick="backProcess();">BackSpace</td>
   <td align='center' class='b1' width='70'
    onmouseover="this.className='b2'" onmouseout="this.className='b1'"
    onmousedown="this.className='b3'" onmouseup="this.className='b2'"
    style='cursor:hand; color:FF0000;' onclick="Display(''); init();"><u>C</u>lear</td>
  </tr>
  </table>
</td>
</tr>
<tr>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000' onclick="memoryJob('clear');">M<u>D</u></td>
<td> </td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(7);'>7</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(8);'>8</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(9);'>9</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000;' onclick="setOP('/');">/</td>
<td align='center' class='b1' width='40'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='setSqrt();'>sqrt</td>
</tr>
<tr>
<td align='center'+ ' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000' onclick="memoryJob('restore');">M<u>R</u></td>
<td> </td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(4);'>4</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(5);'>5</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(6);'>6</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000;' onclick="setOP('*');">*</td>
<td align='center' class='b1' width='40'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick="setOP('%');">%</td>
</tr>
<tr>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000' onclick="memoryJob('save');">M<u>S</u></td>
<td> </td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(1);'>1</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='+ 'b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(2);'>2</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(3);'>3</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000;' onclick="setOP('-');">-</td>
<td align='center' class='b1' width='40'
  onmouseover="this.className='b2'" onmouseout="this.className='+ 'b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick="selfDiv();">1/x</td>
</tr>
<tr>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000' onclick="memoryJob('add');"><u>M</u>+</td>
<td> </td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='+ 'b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='javascript:setValue(0);'>0</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='setABS();'>+/-</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand;' onclick='setDot();'>.</td>
<td align='center' class='b1' width='30'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000;' onclick="setOP('+');">+</td>
<td align='center' class='b1' width='40'
  onmouseover="this.className='b2'" onmouseout="this.className='b1'"
  onmousedown="this.className='b3'" onmouseup="this.className='b2'"
  style='cursor:hand; color:FF0000;' onclick='compute();'>=</td>
</tr>
</table>
</body>
</html>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
폼의 입력 값의 공백 및 자릿 수 검사 코드 [1] Technician 2002.07.17
사용자가 입력한 키 알아내기(KeyCode) [4] ZipShin 2002.07.16
인터넷익스플로러 타이틀바에 제목나타내기 [3] ZipShin 2002.07.12
해상도가 몇인지를 구해주는 스크립트 [3] ZipShin 2002.07.07
원하는 홈페이지를 시작페이지 설정하기!!!! [3] 오길호 2002.07.05
제목이 계속 바뀝니다. [1] 행복=진만 2002.07.03
간단한 쿠키 &세션 확인용 M2Vis 2002.07.01
input버튼으로 뒤로가기 앞으로 가기 만들어보자~~ [1] ZipShin 2002.06.26
자바스크립트로 메타태그 리프레쉬 효과를 보여주자. [5] ZipShin 2002.06.26
순수 자바스크립트로 작성된 계산기... [2] 용가리 2002.06.22
팝업창에서 부모창 링크 제어하기(노프레임 및 프레임 적용가능) [9] 양지다컴 2002.06.17
접속할때마다 바뀌는 제목표시줄 오토™ 2002.06.16
강추!! 요리조리 날라다니는 놈을 잡아랏...!! ;; [6] 키르(絶對) 2002.06.14
배경색과 글자색같이 변화시키기 2 keymove 2002.06.14
배경색과 글자색같이 변화시키기 keymove 2002.06.14
클릭으로 배경이미지 변경 [4] keymove 2002.06.14
웹상에서도 내맘데로 이미지 크기를 조절할 수 있다?? [9] ▩윤미 2002.06.13
뭐 다 할줄아시겠지만 -_- absolute positioning [3] [º^^º]MISO 2002.06.13
랜덤메시지 + 흐르는 메세지 [4] keymove 2002.06.13
[수정] 랜덤배경음악 + 폼버튼 [1] keymove 2002.06.13
태그 쓰기