js计算器（两个数之间的运算）

最新推荐文章于 2024-05-03 11:08:18 发布
hjingtao
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量4.3k
点赞数 1
文章标签： button input function javascript xhtml server
本文链接：https://blog.csdn.net/hjingtao/article/details/7322368
版权
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="calc.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
      function ShowNo()                        //隐藏两个层 
      {
          document.getElementById("calc").style.display = "none";

      }
      function $(id) {
          return (document.getElementById) ? document.getElementById(id) : document.all[id];
      }
      function showFloat()                    //根据屏幕的大小显示两个层
      {
          var range = getRange();
          $('doing').style.width = range.width + "px";
          $('doing').style.height = range.height + "px";
          document.getElementById("calc").style.display = "";
      }
      //关闭计算器
      function closeFloat() {
          document.getElementById("calc").style.display = "none";
          document.getElementById("txtNum").value = "";
      }
      function getRange()                      //得到屏幕的大小 
      {
          var top = document.body.scrollTop;
          var left = document.body.scrollLeft;
          var height = document.body.clientHeight;
          var width = document.body.clientWidth;

          if (top == 0 && left == 0 && height == 0 && width == 0) {
              top = document.documentElement.scrollTop;
              left = document.documentElement.scrollLeft;
              height = document.documentElement.clientHeight;
              width = document.documentElement.clientWidth;
          }
          return { top: top, left: left, height: height, width: width };
      }
      //计算器
      var counter = 0;
      var num1 = 0;
      var num2 = 0;
      var opp;
      function enternumber(Num) {
          if (document.getElementById("txtNum").value == "0" || document.getElementById("txtNum").value == "") {
              document.getElementById("txtNum").value = Num;
          }
          else {
              document.getElementById("txtNum").value += Num;
          
//          form1.txtNum.value += event.srcElement.innerText;
//          form1.txtNum.title += event.srcElement.name;

      }
      
      function  Operation(Op) {
          num1 = document.getElementById("txtNum").value;
          opp = Op;
          document.getElementById("txtNum").value = "";
      }

      //计算结果
      function cout() {
          num2 = document.getElementById("txtNum").value;
          switch (opp) {
              case "+":
                  counter = parseFloat(num1) + parseFloat(num2);
                 // document.getElementById("txtNum").value = eval(form1.txtNum.title);
                  break;
              case "-":
                  counter = parseFloat(num1) - parseFloat(num2);
                  break;
              case "*":
                  counter = parseFloat(num1) * parseFloat(num2);
                  break;
              case "/":
                  counter = parseFloat(num1) / parseFloat(num2);
                  break;
          }

          document.getElementById("txtNum").value = counter;

      }
      //清空
      function clea() {
          
          document.getElementById("txtNum").value = "0";
      }
      //退格
      function backspace() {
          var itSelf = document.getElementById("txtNum").value;
          document.getElementById("txtNum").value = itSelf.substring(0, itSelf.length - 1);//截取字符串
          if (document.getElementById("txtNum").value == "")
              document.getElementById("txtNum").value = 0;

      }
    </script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table style=" width:500px;">
            <tr>
                <td colspan="4">
                    <input id="txtNum" name="txtNum" type="text" style=" margin-left:100px"/><a href="javascript:void(0)" οnclick="showFloat()" style=" color:Blue; margin-left :30px;">计算器</a>
                    <a href="javascript:void(0)" οnclick="closeFloat()">关闭计算器</a></td>
            </tr></table>
            <div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;"> 
    </div>
            <div id="calc" style="border:solid 10px #898989;background:#fff;padding:10px;width:680px;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;">
            <table style="height: 167px; width: 187px; text-align :center; margin-left :150px; " >
            <tr>
                <td colspan="2" style="text-align: center">
                    <input id="btnPoint" name="btnPoint" type="button" value="." align="middle"  style =" width :60px" onclick ="enternumber('.')"/></td>
                    <td colspan="2" style="text-align: center">
                    <input id="btnRoot" name="btnRoot" type="button" style =" width :60px" value="←" οnclick="backspace()" /></td>
            </tr>
            <tr>
                <td >
                   <input id="btn1" name="1" type="button" value="1" onclick ="enternumber()"/></td>
                <td >
                   <input id="btn2" name="btn2" type="button" value="2" onclick ="enternumber(2)"/></td>
                <td>
                   <input id="btn3"  name="btn3" type="button" value="3" onclick ="enternumber(3)"/></td>
                <td>
                   <input id="btnPlus"  name="btnPlus" type="button" value="+" οnclick="Operation('+')"/></td>
            </tr>
            <tr>
                <td >
                    <input id="btn4" name="btn4" type="button" value="4" onclick ="enternumber(4)"/></td>
                <td >
                   <input id="btn5" name="btn5"  type="button" value="5" onclick ="enternumber(5)"/></td>
                <td>
                   <input id="btn6"  name="btn6"type="button" value="6" onclick ="enternumber(6)"/></td>
                <td>
                    <input id="btnCut" name="btnCut" type="button" value="-" οnclick="Operation('-')"/></td>
            </tr>
            <tr>
                <td >
                     <input id="btn7" name="btn7" type="button" value="7" onclick ="enternumber(7))"/></td>
                <td >
                   <input id="btn8" name="btn8" type="button" value="8" onclick ="enternumber(8)"/></td>
                <td>
                   <input id="btn9" name="btn9" type="button" value="9" onclick ="enternumber(9)"/></td>
                <td>
                    <input id="btnChengji"  name="btnChengji" type="button" value="*" οnclick="Operation('*')"/></td>
            </tr>
            <tr>
                <td >
                   <input id="btnDelete" name="btnDelete" type="button" value="C" οnclick="clea()"/></td>
                <td >
                    <input id="btn0" name="btn0" type="button" value="0" onclick ="enternumber(0)"/></td>
                <td>
                     <input id="btnEqual" name="btnEqual" type="button" value="=" οnclick="cout()"/></td>
                <td>
                   <input id="btnRemainder" name="btnRemainder" type="button" value="/" οnclick="Operation('/')"/></td>
            </tr>
        </table>
    </div>
    </div>
    </form>
</body>
</html>
hjingtao
关注
1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js计算器（两个数之间的运算）

function ShowNo() //隐藏两个层 { document.getElementById("calc").style.display = "none"; } function $(id) { return (document.getElementB
复制链接

扫一扫