js html实现计算器功能

  • Z时代
  • 2024-01-10
  • 分类：综合

本文实例为大家分享了html实现计算器功能的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    var numresult;
    var str;
    function onclicknum(nums)
    {
      str = document.getElementById("nummessege");
      str.value = str.value + nums;
    }
    function onclickclear()
    {
      str = document.getElementById("nummessege");
      str.value = "";
    }
    function onclickresult()
    {
      str = document.getElementById("nummessege");
      numresult = eval(str.value);
      str.value = numresult;
    }
  </script>
</head>
<body bgcolor="affff">
  <!--定义按键表格,每个按键对应一个事件触发-->
  <table border="1" align="center" bgColor="#bbff77"
      style="height: 350px; width: 270px">
    <tr>
      <td colspan="4">
        <input type="text" id="nummessege"
            style="height: 90px; width: 350px; font-size: 50px" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="1" id="1" onclick="onclicknum(1)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="2" id="2" onclick="onclicknum(2)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="3" id="3" onclick="onclicknum(3)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="+" id="add" onclick="onclicknum('+')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="4" id="4" onclick="onclicknum(4)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="5" id="5" onclick="onclicknum(5)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="6" id="6" onclick="onclicknum(6)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="-" id="sub" onclick="onclicknum('-')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="7" id="7" onclick="onclicknum(7)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="8" id="8" onclick="onclicknum(8)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="9" id="9" onclick="onclicknum(9)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="*" id="mul" onclick="onclicknum('*')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="0" id="0" onclick="onclicknum(0)"
            style="height: 70px; width: 190px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="." id="point" onclick="onclicknum('.')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="/" id="division"
            onclick="onclicknum('/')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="Del" id="clear"
            onclick="onclickclear()"
            style="height: 70px; width: 190px; font-size: 35px" />
      </td>
      <td colspan="2">
        <input type="button" value="=" id="result"
            onclick="onclickresult()"
            style="height: 70px; width: 190px; font-size: 35px" />
      </td>
    </tr>
  </table>
</body>
</html>

效果图

以上是 js html实现计算器功能 的全部内容， 来源链接： utcz.com/z/353916.html

回到顶部