»
EnglishFrenchVietnamese

Print - A Calculator That You Can Drag - JavaScriptBank.com

Full version: jsB@nk » Calculation » Calculator » A Calculator That You Can Drag
URL: http://www.javascriptbank.com/a-calculator-that-you-can-drag.html

A Calculator That You Can Drag © JavaScriptBank.comThis JavaScript makes a basic dragable calculator.

Full version: jsB@nk » Calculation » Calculator » A Calculator That You Can Drag
URL: http://www.javascriptbank.com/a-calculator-that-you-can-drag.html



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


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


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