웹마스터 팁

  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>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[동영상] 제2강 연산자 [1] 인테리어뱅크 2006.04.11
[동영상] 제1강 자바 스크립트의 기본 개념 인테리어뱅크 2006.04.11
페이지를 풀창으로 띄우는 방법 [1] 인테리어뱅크 2006.04.11
드래그금지 태그 풀어보기 [2] 인테리어뱅크 2006.04.10
홈페이지 TOP 버튼 만들어 보기 [7] 인테리어뱅크 2006.04.10
마우스 따라다니 면서 원형을 그리면서 돌아가는것... 왜,그러지 2006.04.07
DHTML 계산기 왜,그러지 2006.04.05
마우스 따라다니는 아날로그 시계 [1] 왜,그러지 2006.04.05
텍스트 위에 네온 빛이 이동하는 효과.. 왜,그러지 2006.04.05
3D 메세지 나타나기... 왜,그러지 2006.04.05
두가지 색으로 깜박거리는 텍스트 keymove 2006.03.17
게임상의 캐릭터와 대화하는 것 같이 보이기(?) [4] 세강 :D 2006.02.24
firefox에서 location.href안 먹힐 때 해결법 [1] 꿀벙이 2006.02.24
[동영상강좌] 제20회차 - 다중 if문 아이티스터디 2006.02.02
[동영상강좌] 제19회차 - 조건문 if 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제18회차 - 문자열 연산자, 조건연산자 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제17회차 - 논리연산자, 비교연산자 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제16회차 - 산술연산자, 할당연산자, 증감연산자 알아보기 아이티스터디 2006.02.02
[동영상강좌] 제15회차 - 변수 선언하기 아이티스터디 2006.02.02
[동영상강좌] 제14회차 - 스크립트내 html삽입하기 아이티스터디 2006.02.02
태그 쓰기