求分享：文本框带小计算器，输入数字

Question

应该大家都明白意思。比如有个文本框要输入数字，焦点到达文本框时，就出来一个小计算器，计算结果输入文本框。文本框失去焦点时，这小计算器就消失。
asp.net控件也行，js也行。分不多，是求分享不是求你们给我重头写。大家谁手上有这种控件分享下

Answer 1

<style type="text/css">
<!--
.计算器字体1 {font-family: "宋体"; font-size: 12; }
.计算器字体2 {font-size: 12}
-->
</style><script language="javascript">
        var moveable = false;
        function aa(val)
        {                        
             var obj = document.getElementById("div");
            if(val == 0)
            {
                obj.style.display="";
                        var x,y;
            
                x = event.clientX;
                y = event.clientY;
           
                obj.style.left=x;
                obj.style.top=y;
                        //alert("X:"+x+"Y:"+y);
            }
                    else
              obj.style.display="none";
        }    
        function startgrap(obj)
        {                        
            if(event.button==1)
            {
            obj.setCapture();
             //记录鼠标和层位置;
                       x0 = event.clientX;
                       y0 = event.clientY;
                       x1 = parseInt(obj.style.left);
                       y1 = parseInt(obj.style.top);
                       moveable = true;            
            }
         }
        function stopgrap(obj)
        {
            if(moveable)
            {
                obj.releaseCapture();//用来释放对鼠标的捕捉
                moveable = false;
            }
        }
        function grap(obj)
        {
             if(moveable)
                  {                       
                           obj.style.left = x1 + event.clientX - x0;
                           obj.style.top  = y1 + event.clientY - y0;
            }
        }
function hidit()
{

mypad.style.display='none';}
function shows()
{
mypad.style.display='';mypad.visibility = "visible";
}
    </script>
<script language="javascript"> 
<!-- 
var finished=0 
var mem="" function bck() { 
   tmp = document.pad.box.value 
   tmplen = tmp.length 
   tmp = tmp.substring(0,tmplen-1) 
   document.pad.box.value = tmp 
} function key(data) { 
   if ( (data=="/") || (data=="*") || (data=="-") || (data=="+")) { 
       finished=0 
   } 
   if (finished) { 
       document.pad.box.value="" 
       finished=0 
   } 
   document.pad.box.value += data 
} function MP() { 
   mem=document.pad.box.value 
} function MR() { 
   if (finished) { 
      document.pad.box.value="" 
      finished=0 
   } 
   document.pad.box.value += mem 
} 
function done() { 
   document.pad.box.value = eval(document.pad.box.value) 
   finished=1 
} function clrx() { 
   document.pad.box.value = "" 
} function backspace() { 
   tmp = document.pad.box.value 
   tmplen = tmp.length 
   tmp = tmp.substring(0,tmplen-1) 
   document.pad.box.value = tmp 
} function powx() { 
   tmp = document.pad.box.value; 
   document.pad.box.value="Math.pow("+tmp+",)" 
} function plusminus() { 
   document.pad.box.value=eval("-("+document.pad.box.value+")") 
   finished=1 
} 
function invx() { 
   document.pad.box.value=eval("1/("+document.pad.box.value+")") 
   finished=1 } function squareRoot() { 
   document.pad.box.value=eval("Math.sqrt("+ document.pad.box.value+")") 
   finished=1 
} 
function errorHandler(message, url, line) { 
   alert("对不起，有错误，原因如下： "+"\n"+message) 
   return true 
} window.onerror = errorHandler //--> 
</script> 
<div id="mypad" style='position: absolute; width:246px; top:24px; left:900px;float:right; display:none;z-index: 1; height: 246px;'onmousedown="startgrap(this);" onmouseup="stopgrap(this);" onmousemove="grap(this);">
    
<form name="pad" method="post" action=""><table width="1%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#666666">
    <tr>
      <td bgcolor="#FFFFFF"><table border="0" align="center">
        <tr>
          <td height="23" colspan="4" bgcolor="#82BEFB"><table width="100%" border="0">
            <tr>
              <td width="79%"><span class="计算器字体1">&nbsp;计算器</span></td>
              <td width="21%"><div align="center" class="计算器字体1" onClick="javascript:hidit();" style="cursor:pointer">X</div></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td colspan="4"><input name="box" type="text" size="25" />          </td>
        </tr>
        <tr>
          <td colspan="2"><span class="计算器字体2"></span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:done()" bgcolor="#FFFF00"><span class="计算器字体1">计算</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:clrx()" bgcolor="#00FF00"><span class="计算器字体1">清除</span></td>
        </tr>
        <tr>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('1')" bgcolor="#C6E0FD"><span class="计算器字体1">
            <!-- all the buttons go here, just add as many as you like! -->
            1</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('2')" bgcolor="#C6E0FD"><span class="计算器字体1">2</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('3')" bgcolor="#C6E0FD"><span class="计算器字体1">3</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('+')" bgcolor="#00FFFF"><span class="计算器字体1">＋</span></td>
        </tr>
        <tr>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('4')" bgcolor="#C6E0FD"><span class="计算器字体1">4</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('5')" bgcolor="#C6E0FD"><span class="计算器字体1">5</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('6')" bgcolor="#C6E0FD"><span class="计算器字体1">6</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('-')" bgcolor="#00FFFF"><span class="计算器字体1">－</span></td>
        </tr>
        <tr>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('7')" bgcolor="#C6E0FD"><span class="计算器字体1">7</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('8')" bgcolor="#C6E0FD"><span class="计算器字体1">8</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('9')" bgcolor="#C6E0FD"><span class="计算器字体1">9</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('*')" bgcolor="#00FFFF"><span class="计算器字体1">×</span></td>
        </tr>
        <tr>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('.')" bgcolor="#FFFF00"><span class="计算器字体1">. </span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('0')" bgcolor="#C6E0FD"><span class="计算器字体1">0 </span></td>
          <td align="center" style="width:40px;" onclick="javascript:plusminus()" bgcolor="#FFFF00"><span class="计算器字体1">+/-</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('/')" bgcolor="#00FFFF"><span class="计算器字体1">÷</span></td>
        </tr>
        <tr>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('(')" bgcolor="#00FFFF"><span class="计算器字体1">(</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key(')')" bgcolor="#00FFFF"><span class="计算器字体1">)</span></td>
          <td><span class="计算器字体2"></span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:MR()" bgcolor="#00FF00"><span class="计算器字体1">MR</span></td>
        </tr>
        <tr>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:squareRoot()" bgcolor="#618E1D"><span class="计算器字体1">开方</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:javascript:invx()" bgcolor="#618E1D"><span class="计算器字体1">倒数</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:key('e')" bgcolor="#618E1D"><span class="计算器字体1">E</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:MM()" bgcolor="#00FF00"><span class="计算器字体1">M-</span></td>
        </tr>
        <tr>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:clrx()" bgcolor="#FFFF00"><span class="计算器字体1">清除</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:bck()" bgcolor="#FFFF00"><span class="计算器字体1">后退</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:done()" bgcolor="#00FFFF"><span class="计算器字体1">＝</span></td>
          <td align="center" style="width:40px;cursor:pointer;" onclick="javascript:MP()" bgcolor="#00FF00"><span class="计算器字体1">M+</span></td>
        </tr>
      </table></td>
    </tr>
  </table>
</form>
</div>上面的代码，是asp的，include进asp文件里就能用。我现在要弄个asp.net的，不想重复劳动。大家手上有就发个出来，咱们都爱偷懒。从头帮我写的就算了，谁的时间都是时间。

Answer 2

你的代码实现是js的，不管asp还是aspx
可以重用的，复制到aspx里还有个列子http://archive.cnblogs.com/a/1519577/

Answer 3

我的代码不够纯js,和你给的例子类似，还是用到了显示页。改改也是可以改的，就是想看有没有人手上有现成的纯js或asp.net用户控件。