»
EnglishFrenchVietnamese

Print - Basic Calculator - JavaScriptBank.com

Full version: jsB@nk » Calculation » Calculator » Basic Calculator
URL: http://www.javascriptbank.com/basic-calculator.html

Basic Calculator © JavaScriptBank.comThis 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: http://www.javascriptbank.com/basic-calculator.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->