웹마스터 팁

  2. Support
  3. 웹마스터 팁

DHTML 계산기

2006.04.05 23:12

왜,그러지

DHTML 계산기로 사용을 하는 데는 좋아요..

웹페이지의 <body> 부분에 삽입 하여 주시면 됩니다...기타 색상은 수정을 하여 이용을 하세요..


<table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000"
style="border-color:black" onClick="previouskey=event.srcElement.innerText">
  <tr>
    <td width="100%" bgcolor="#FFFFFF" id="result"
    style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
  </tr>
  <tr>
    <td width="100%" valign="middle" align="center"><table border="0" width="100%"
    cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
      <tr>
        <td width="80%" align="center"><table border="1" width="100%" cellspacing="0"
        cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white"
        onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'"
        onMouseout="event.srcElement.style.color='white'" onselectStart="return false"
        onClick="calculate()" height="82">
          <tr>
            <td width="25%" align="center" height="17">7</td>
            <td width="25%" align="center" height="17">8</td>
            <td width="25%" align="center" height="17">9</td>
            <td width="25%" align="center" height="17">/</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">4</td>
            <td width="25%" align="center" height="19">5</td>
            <td width="25%" align="center" height="19">6</td>
            <td width="25%" align="center" height="19">*</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">1</td>
            <td width="25%" align="center" height="19">2</td>
            <td width="25%" align="center" height="19">3</td>
            <td width="25%" align="center" height="19">-</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">0</td>
            <td width="25%" align="center" height="19"
            onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
            <td width="25%" align="center" height="19">.</td>
            <td width="25%" align="center" height="19">+</td>
          </tr>
        </table>
        </td>
        <td width="20%"><div align="left"><table border="1" width="100%" cellspacing="0"
        cellpadding="0">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center"
            onClick="result.innerText=0;results=''">C</td>
          </tr>
        </table>
        </div><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0"
        height="81">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center"
            onMouseover="event.srcElement.style.color='yellow'"
            onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
          </tr>
        </table>
        </div></td>
      </tr>
    </table>
    </td>
  </tr>
</table>


<script language="JavaScript1.2">

/*
DHTML Calculator Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var results=''
var previouskey=''
var re=/(/|*|+|-)/
var re2=/(/|*|+|-){2}$/
var re3=/.+(/|*|+|-).+/
var re4=/d|./
var re5=/^[^/*+].+d$/
var re6=/./

function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}

results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)

result.innerText=results
}
}

function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}



function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}

</script>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
이미지를 HTML table tag로 변환. [7] file 민이 2002.12.31
국내 IP정보를 조회하는 클래스 [7] 행복한고니 2003.01.04
[동주아빠] PHP 게시판(23강) - 내용 보기 기능(1) view.php 디자인 손병목 2003.01.04
[동주아빠] PHP 게시판(24강) - 내용 보기 기능(2) view.php 소스 file 손병목 2003.01.04
[동주아빠] PHP 게시판(25강) - 내용 보기 기능(3) 설명 [1] 손병목 2003.01.04
access 자료(mdb) 를 MySQL로 변환하는 방법 [8] 황선규 2003.01.06
[1분짜리 팁] 절대경로 알아내기! [14] 찐군 2003.01.09
웹서핑중 구했습니다. 조그만 달력.. [6] file 황선규 2003.01.10
[동주아빠] PHP 게시판(26강) - 수정(modify.php) 손병목 2003.01.11
[동주아빠] PHP 게시판(27강) - 수정(modify_ok.php) 손병목 2003.01.11
[동주아빠] PHP 게시판(28강) - 삭제(delete.php) 손병목 2003.01.11
[동주아빠] PHP 게시판(끝.29강) - 삭제(delete_ok.php) [18] 손병목 2003.01.11
웹 인증 보호, 윈도우 로그인 폼 이용 (authenticate) [9] file 둘리나라™ 2003.01.13
파일 하나로 끝내는-_- NZEO 북마크...-_-a [14] ineal 2003.01.13
텍스트 링크, 배너 링크*랜덤 (틀팁포함) [3] 둘리나라™ 2003.01.16
국내 IP 조회하는 클래스.(소켓사용) [1] 행복한고니 2003.01.17
엔지오 처럼 주소 /?channel=about 식으로 만들기 [18] 위니 2003.01.21
[제로카운터 수정하기#1-초보용] 테이블 다 지우고 새로 설치하기 [2] 김태훈 2003.01.22
[제로카운터 수정하기#2-초보용] 새로 설치후 예전 방문자수로 고치기(최고방문자수 문제해결됨) 김태훈 2003.01.22
[제로카운터 수정하기#3-초보용] 어제 오늘 방문자수 변경하기 김태훈 2003.01.22
태그 쓰기