Full version: jsB@nk » Calculation » Calculator » Basic Calculator
URL: https://www.javascriptbank.com/basic-calculator.html
This is a very simple calculator, all done with javascript. Just click the numbers and the operators and use the '=' button to calculate! This is a neat example of the LIMITLESS powers of JavaScript.
Full version: jsB@nk » Calculation » Calculator » Basic Calculator
URL: https://www.javascriptbank.com/basic-calculator.html
<STYLE type=text/css>BODY DIV#tab {BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; CURSOR: move; HEIGHT: 20px; POSITION: absolute; WIDTH: 150px}BODY DIV#marker {BACKGROUND-COLOR: black; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; COLOR: white; HEIGHT: 200px; POSITION: absolute; WIDTH: 150px}BODY SPAN#screen {BACKGROUND-COLOR: darkblue; COLOR: lightyellow; HEIGHT: 20px; POSITION: relative; WIDTH: 130px}BODY A.button {BACKGROUND-COLOR: darkblue; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; COLOR: white; CURSOR: hand; FONT-WEIGHT: bold; HEIGHT: 20px; POSITION: relative; TEXT-DECORATION: none; WIDTH: 45px}BODY A:hover {BACKGROUND-COLOR: red; COLOR: white}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript type=text/javascript><!--var down=false;var first;var buffer="";var toggle=false;var func=new Array("*","/","+","-",".");window.onload=main;if(navigator.appName=="Netscape") window.document.captureEvents(event.MOUSEMOVE);function MDown(){ down=true;}function MUp(){ down=false;document.getElementById('unsel').select();}function MMove(e){ if(down){ document.getElementById('tab').style.left=(navigator.appName=="Netscape")?e.PageX:event.clientX; document.getElementById('tab').style.top=(navigator.appName=="Netscape")?e.PageY:event.clientY;document.getElementById('marker').style.left=(navigator.appName=="Netscape")?e.PageX:event.clientX;document.getElementById('marker').style.top=(navigator.appName=="Netscape")?e.PageY+20:event.clientY+20;}}function main(){ if(navigator.appName=="Netscape") { with(document.getElementById('tab').style) { zIndex=1;top:0+"px";backgroundColor="transparent"; } with(document.getElementById('marker').style) { zIndex=0; width=300+"px"; top=20+"px"; } } for(var x=-1;x<9;x++) creatButtons(x,true,""); creatBR();creatBR(); for(var x=0,y=9;x<func.length;x++,y++) creatButtons(y,false,func[x]); creatPerc(); creatBR();creatBR(); creatSQRT(); creatPOW(); creatEnter(); creatCLS(); creatBK(); window.document.onmouseup=MUp;window.document.onmousemove=MMove;}function creatButtons(IDNo,num,txt){ a=document.createElement('a'); a.id="aid"+IDNo; a.className="button"; if(navigator.appName=="Netscape") a.innerHTML=(num==true)?"<b style='visibility:hidden'>_</b>"+(IDNo+1)+"<b style='visibility:hidden'>_</b>":"<b style='visibility:hidden'>_</b>"+txt+"<b style='visibility:hidden'>_</b>"; else a.innerHTML=(num==true)?(IDNo+1):txt; a.href="javascript:sendKey("+IDNo+","+num+")"; document.getElementById('marker').appendChild(a);} function creatSQRT(){ a=document.createElement('a');a.className="button"; a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>SQRT<b style='visibility:hidden;'>_</b>":"SQRT";a.href="javascript:_SQRT()";document.getElementById('marker').appendChild(a);}function creatPOW(){ a=document.createElement('a');a.className="button"; a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>POW<b style='visibility:hidden;'>_</b>":"POW";a.href="javascript:_POW()";document.getElementById('marker').appendChild(a);}function creatPerc(){ a=document.createElement('a');a.className="button"; a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>%<b style='visibility:hidden;'>_</b>":"%";a.href="javascript:_Perc()";document.getElementById('marker').appendChild(a);}function creatEnter(){ a=document.createElement('a');a.className="button"; a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>=<b style='visibility:hidden;'>_</b>":"=";a.href="javascript:ALU("+toggle+")";document.getElementById('marker').appendChild(a);}function creatCLS(){ a=document.createElement('a');a.className="button"; a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>CLS<b style='visibility:hidden;'>_</b>":"CLS";a.href="javascript:CLS()";document.getElementById('marker').appendChild(a);}function creatBK(){ a=document.createElement('a');a.className="button"; a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>BKSP<b style='visibility:hidden;'>_</b>":"BKSP";a.href="javascript:BK()";document.getElementById('marker').appendChild(a);}function creatBR(){ br=document.createElement('br');document.getElementById('marker').appendChild(br);}function sendKey(IDNo,num){ switch(IDNo) { case 9: temp=func[0]; break; case 10: temp=func[1]; break; case 11: temp=func[2]; break; case 12: temp=func[3]; break; case 13: temp=func[4]; break; default: temp=IDNo+1; temp.toString(); } buffer+=temp; document.getElementById('screen').innerHTML=buffer;}function ALU(){ if(toggle) { temp=Math.pow(eval(first),eval(document.getElementById('screen').innerHTML));toggle=false; } else { temp=eval(document.getElementById('screen').innerHTML); } buffer=temp.toString(); document.getElementById('screen').innerHTML=temp;}function CLS(){ buffer="";toggle=false; document.getElementById('screen').innerHTML="";}function BK(){ buffer=document.getElementById('screen').innerHTML.substring(0,document.getElementById('screen').innerHTML.length-1);document.getElementById('screen').innerHTML=buffer;}function _SQRT(){ temp=Math.sqrt(eval(document.getElementById('screen').innerHTML)); document.getElementById('screen').innerHTML=temp;buffer=temp.toString();}function _POW(){ toggle=true; first=document.getElementById('screen').innerHTML; document.getElementById('screen').innerHTML="";buffer="";}function _Perc(){ buffer=""; temp=eval(eval(document.getElementById('screen').innerHTML)/100); document.getElementById('screen').innerHTML=temp;buffer=temp.toString();}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV id=tab onmousedown=MDown() onmouseup=MUp()>~ Calculator ~</DIV><BR><DIV id=marker><BR><SPAN id=screen></SPAN><BR></DIV><INPUT id=unsel style="POSITION: absolute; top-900;left: -900" size="20"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->