js html實(shí)現(xiàn)計(jì)算器功能

發(fā)布時(shí)間：2020-09-30 07:35:13 來源：腳本之家閱讀：156 作者：~李疆欄目：web開發(fā)

本文實(shí)例為大家分享了html實(shí)現(xiàn)計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!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">
  <!--定義按鍵表格,每個(gè)按鍵對(duì)應(yīng)一個(gè)事件觸發(fā)-->
  <table border="1" align="center" bgColor="#bbff77"
      >
    <tr>
      <td colspan="4">
        <input type="text" id="nummessege"
             />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="1" id="1" onclick="onclicknum(1)"
            >
      </td>
      <td>
        <input type="button" value="2" id="2" onclick="onclicknum(2)"
            >
      </td>
      <td>
        <input type="button" value="3" id="3" onclick="onclicknum(3)"
            >
      </td>
      <td>
        <input type="button" value="+" id="add" onclick="onclicknum('+')"
            >
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="4" id="4" onclick="onclicknum(4)"
            >
      </td>
      <td>
        <input type="button" value="5" id="5" onclick="onclicknum(5)"
            >
      </td>
      <td>
        <input type="button" value="6" id="6" onclick="onclicknum(6)"
            >
      </td>
      <td>
        <input type="button" value="-" id="sub" onclick="onclicknum('-')"
            >
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="7" id="7" onclick="onclicknum(7)"
            >
      </td>
      <td>
        <input type="button" value="8" id="8" onclick="onclicknum(8)"
            >
      </td>
      <td>
        <input type="button" value="9" id="9" onclick="onclicknum(9)"
            >
      </td>
      <td>
        <input type="button" value="*" id="mul" onclick="onclicknum('*')"
            >
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="0" id="0" onclick="onclicknum(0)"
            >
      </td>
      <td>
        <input type="button" value="." id="point" onclick="onclicknum('.')"
            >
      </td>
      <td>
        <input type="button" value="/" id="division"
            onclick="onclicknum('/')"
            >
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="Del" id="clear"
            onclick="onclickclear()"
             />
      </td>
      <td colspan="2">
        <input type="button" value="=" id="result"
            onclick="onclickresult()"
             />
      </td>
    </tr>
  </table>
</body>
</html>

效果圖

js html實(shí)現(xiàn)計(jì)算器功能

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

js html實(shí)現(xiàn)計(jì)算器功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽