Full version: jsB@nk » Calculation » Calculator » A Calculator That You Can Drag
URL: https://www.javascriptbank.com/a-calculator-that-you-can-drag.html
This JavaScript makes a basic dragable calculator.
Full version: jsB@nk » Calculation » Calculator » A Calculator That You Can Drag
URL: https://www.javascriptbank.com/a-calculator-that-you-can-drag.html
<style type="text/css"> <!-- .drag{position:relative;cursor:hand; border: 1px solid black; width: 150px; height: 100px; padding: 10px; background-color: silver;} //--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript1.2"> <!-- var ie=document.all var ns6=document.getElementById&&!document.all var dragapproved=false var z,x,y function move(e) { if (dragapproved) { z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y return false } } function drags(e) { if (!ie&&!ns6) return var firedobj=ns6? e.target : event.srcElement var topelement=ns6? "HTML" : "BODY" while (firedobj.tagName!=topelement&&firedobj.className!="drag") { firedobj=ns6? firedobj.parentNode : firedobj.parentElement } if (firedobj.className=="drag") { dragapproved=true z=firedobj temp1=parseInt(z.style.left+0) temp2=parseInt(z.style.top+0) x=ns6? e.clientX: event.clientX y=ns6? e.clientY: event.clientY document.onmousemove=move return false } } document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") //--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="calc" class="drag"> <form name="calculator"> <table border="3" cellpadding="0" bordercolor="gray" bgcolor="black" cellspacing="1" width="150"> <tbody><tr> <td> <input type="text" size="23" length="19" value="" name="ans" style="background: black none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial; color: red;"> </td> </tr> </tbody></table> <table border="3" cellpadding="2" bordercolor="gray" cellspacing="2" width="150" bgcolor="black"> <tbody><tr> <td align="center"> <input type="button" value=" 7 " name="seven" onmousedown="document.calculator.ans.value+='7'"> </td> <td align="center"> <input type="button" value=" 8 " name="eight" onclick="document.calculator.ans.value+='8'"> </td> <td align="center"> <input type="button" value=" 9 " name="nine" onclick="document.calculator.ans.value+='9'"> </td> <td align="center"> <input type="button" value=" / " name="divide" onclick="document.calculator.ans.value+='/'"> </td> </tr> <tr> <td align="center"> <input type="button" value=" 4 " name="four" onclick="document.calculator.ans.value+='4'"> </td> <td align="center"> <input type="button" value=" 5 " name="five" onclick="document.calculator.ans.value+='5'"> </td> <td align="center"> <input type="button" value=" 6 " name="six" onclick="document.calculator.ans.value+='6'"> </td> <td align="center"> <input type="button" value=" * " name="multiply" onclick="document.calculator.ans.value+='*'"> </td> </tr> <tr> <td align="center"> <input type="button" value=" 1 " name="one" onclick="document.calculator.ans.value+='1'"> </td> <td align="center"> <input type="button" value=" 2 " name="two" onclick="document.calculator.ans.value+='2'"> </td> <td align="center"> <input type="button" value=" 3 " name="three" onclick="document.calculator.ans.value+='3'"> </td> <td align="center"> <input type="button" value=" - " name="subtract" onclick="document.calculator.ans.value+='-'"> </td> </tr> <tr> <td align="center"> <input type="button" value=" C " name="clear" onclick="document.calculator.ans.value=''"> </td> <td align="center"> <input type="button" value=" 0 " name="zero" onclick="document.calculator.ans.value+='0'"> </td> <td align="center"> <input type="button" value=" = " name="equal" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)"> </td> <td align="center"> <input type="button" value=" + " name="add" onclick="document.calculator.ans.value+='+'"> </td> </tr> </tbody></table> </form> <p align=center style="font-size: 10px;">Edited by JavaScriptBank.com</p> </div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->