Home » Webmaster Tools and Resources » Software & Scripts » JavaScript » Calculators » [*TITLE HERE*]

Graphical Calculator

A JavaScript calculator with a graphical interface! Sure looks better than most JavaScript calculators out there.

Sample:

Modify the table style to fit you website.

Insert this code before </head>

Insert this code before </body>

<script LANGUAGE="JavaScript">
/*By Alan Simpson
http://www.coolnerds.com
*/


function pad(anystr) {
        document.calc.shownum.value += anystr
}

function calcit() {
        document.calc.shownum.value = eval(document.calc.shownum.value)
}

function clearit() {
        document.calc.shownum.value = ""
}

function backspace() {
        curvalue = document.calc.shownum.value
        curlength = curvalue.length
        curvalue = curvalue.substring(0,curlength-1)
        document.calc.shownum.value = curvalue
}

</script>

<map NAME="calcmap">
<!-- #$-:Image Map file created by Map THIS! -->
<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:1.20 --><!-- #$AUTHOR:Alan Simpson -->
<!-- #$DATE:Sat Mar 16 10:56:04 1996 -->
<!-- #$PATH:C:\JavaScript\ -->
<!-- #$GIF:calcbttn.gif -->
<area SHAPE="RECT" COORDS="10,80,40,106" HREF="javascript:pad('1')">
<area SHAPE="RECT" COORDS="49,80,78,106" HREF="javascript:pad('2')">
<area SHAPE="RECT" COORDS="88,79,117,106" HREF="javascript:pad('3')">
<area SHAPE="RECT" COORDS="128,81,158,105" HREF="javascript:pad('+')">
<area SHAPE="RECT" COORDS="11,115,39,141" HREF="javascript:pad("0")">
<area SHAPE="RECT" COORDS="49,115,78,142" HREF="javascript:pad('.')">
<area SHAPE="RECT" COORDS="89,116,119,141" HREF="javascript:calcit()">
<area SHAPE="RECT" COORDS="128,116,158,142" HREF="javascript:pad('-')">
<area SHAPE="RECT" COORDS="167,80,194,105" HREF="javascript:pad('*')">
<area SHAPE="RECT" COORDS="167,116,196,141" HREF="javascript:pad('/')">
<area SHAPE="RECT" COORDS="11,43,39,71" HREF="javascript:pad('4')">
<area SHAPE="RECT" COORDS="50,45,77,69" HREF="javascript:pad('5')">
<area SHAPE="RECT" COORDS="88,44,117,71" HREF="javascript:pad('6')">
<area SHAPE="RECT" COORDS="127,44,158,71" HREF="javascript:pad(')')">
<area SHAPE="RECT" COORDS="165,43,196,70" HREF="javascript:backspace()">
<area SHAPE="RECT" COORDS="10,7,40,33" HREF="javascript:pad('7')">
<area SHAPE="RECT" COORDS="48,7,81,35" HREF="javascript:pad('8')">
<area SHAPE="RECT" COORDS="87,7,117,34" HREF="javascript:pad('9')">
<area SHAPE="RECT" COORDS="127,7,156,34" HREF="javascript:pad('(')">
<area SHAPE="RECT" COORDS="166,7,195,35" HREF="javascript:clearit()">
</map>
<form NAME="calc">
   <table BORDER="1" BGCOLOR="#C0C0C0">
      <tr>
         <td WIDTH="213"><center><p>
            <input NAME="shownum" VALUE MAXLENGTH="25" SIZE="25"></p></center>
         </td>
      </tr>
      <tr>
         <td WIDTH="213">
            <img USEMAP="#calcmap" SRC="calcbttn.gif" BORDER="0" HEIGHT="153" WIDTH="206"></p></center>
         </td>
      </tr>
   </table>
</form>

Related Resources: