Full version: jsB@nk » Calculation » Calculator » Movable Calculator
URL: https://www.javascriptbank.com/movable-calculator.html
This JavaScript makes a basic dragable calculator.
Full version: jsB@nk » Calculation » Calculator » Movable Calculator
URL: https://www.javascriptbank.com/movable-calculator.html
<style type="text/css"><!--body div#tab { height:20px; width:150px;border:2px outset white;position:absolute;cursor:move }body div#marker { background-color:black;color:white;height:200px;width:150px;border:2px outset white;position:absolute }body span#screen { background-color:darkblue;color:lightyellow;height:20px;width:130px;position:relative; }body a.button { border:2px outset white; background-color:darkblue; color:white; cursor:hand; height:20px; width:45px; text-decoration:none; font-weight:bold; position:relative }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()" style="z-index: 1; width: 300px; background-color: transparent; top: 0px;">~ Calculator ~</div><br> <div id="marker" style="z-index: 0; width: 300px; top: 20px;"><br><span id="screen">346</span><br> <a id="aid-1" class="button" href="javascript:sendKey(-1,true)"> <b style="visibility: hidden;">_</b>0 <b style="visibility: hidden;">_</b></a> <a id="aid0" class="button" href="javascript:sendKey(0,true)"> <b style="visibility: hidden;">_</b>1 <b style="visibility: hidden;">_</b></a> <a id="aid1" class="button" href="javascript:sendKey(1,true)"> <b style="visibility: hidden;">_</b>2 <b style="visibility: hidden;">_</b></a> <a id="aid2" class="button" href="javascript:sendKey(2,true)"> <b style="visibility: hidden;">_</b>3 <b style="visibility: hidden;">_</b></a> <a id="aid3" class="button" href="javascript:sendKey(3,true)"> <b style="visibility: hidden;">_</b>4 <b style="visibility: hidden;">_</b></a> <a id="aid4" class="button" href="javascript:sendKey(4,true)"> <b style="visibility: hidden;">_</b>5 <b style="visibility: hidden;">_</b></a> <a id="aid5" class="button" href="javascript:sendKey(5,true)"> <b style="visibility: hidden;">_</b>6 <b style="visibility: hidden;">_</b></a> <a id="aid6" class="button" href="javascript:sendKey(6,true)"> <b style="visibility: hidden;">_</b>7 <b style="visibility: hidden;">_</b></a> <a id="aid7" class="button" href="javascript:sendKey(7,true)"> <b style="visibility: hidden;">_</b>8 <b style="visibility: hidden;">_</b></a> <a id="aid8" class="button" href="javascript:sendKey(8,true)"> <b style="visibility: hidden;">_</b>9 <b style="visibility: hidden;">_</b></a><br><br> <a id="aid9" class="button" href="javascript:sendKey(9,false)"> <b style="visibility: hidden;">_</b>* <b style="visibility: hidden;">_</b></a> <a id="aid10" class="button" href="javascript:sendKey(10,false)"> <b style="visibility: hidden;">_</b>/ <b style="visibility: hidden;">_</b></a> <a id="aid11" class="button" href="javascript:sendKey(11,false)"> <b style="visibility: hidden;">_</b>+ <b style="visibility: hidden;">_</b></a> <a id="aid12" class="button" href="javascript:sendKey(12,false)"> <b style="visibility: hidden;">_</b>- <b style="visibility: hidden;">_</b></a> <a id="aid13" class="button" href="javascript:sendKey(13,false)"> <b style="visibility: hidden;">_</b>. <b style="visibility: hidden;">_</b></a> <a class="button" href="javascript:_Perc()"> <b style="visibility: hidden;">_</b>% <b style="visibility: hidden;">_</b></a><br><br> <a class="button" href="javascript:_SQRT()"> <b style="visibility: hidden;">_</b>SQRT <b style="visibility: hidden;">_</b></a> <a class="button" href="javascript:_POW()"> <b style="visibility: hidden;">_</b>POW <b style="visibility: hidden;">_</b></a> <a class="button" href="javascript:ALU(false)"> <b style="visibility: hidden;">_</b>= <b style="visibility: hidden;">_</b></a> <a class="button" href="javascript:CLS()"> <b style="visibility: hidden;">_</b>CLS <b style="visibility: hidden;">_</b></a> <a class="button" href="javascript:BK()"> <b style="visibility: hidden;">_</b>BKSP <b style="visibility: hidden;">_</b></a></div></center><input type="text" id="unsel" style="position: absolute; left: -900px;" size="20"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->