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

代码：

<!DOCTYPE html>
<html>
<head>
  <  charset=\"utf-8\" />
  < ></ >
  <  type=\"text/ \">
 
    var numresult;
    var str;
    function  num(nums)
    {
      str = document.getElementById(\"nummessege\");
      str.value = str.value + nums;
    }
    function  clear()
    {
      str = document.getElementById(\"nummessege\");
      str.value = \"\";
    }
    function  result()
    {
      str = document.getElementById(\"nummessege\");
      numresult = eval(str.value);
      str.value = numresult;
    }
  </ >
 
</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\"  =\" num(1)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"2\" id=\"2\"  =\" num(2)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"3\" id=\"3\"  =\" num(3)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"+\" id=\"add\"  =\" num(\'+\')\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
    </tr>
    <tr>
      <td>
        <input type=\"button\" value=\"4\" id=\"4\"  =\" num(4)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"5\" id=\"5\"  =\" num(5)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"6\" id=\"6\"  =\" num(6)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"-\" id=\"sub\"  =\" num(\'-\')\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
    </tr>
    <tr>
      <td>
        <input type=\"button\" value=\"7\" id=\"7\"  =\" num(7)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"8\" id=\"8\"  =\" num(8)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"9\" id=\"9\"  =\" num(9)\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"*\" id=\"mul\"  =\" num(\'*\')\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
    </tr>
    <tr>
      <td colspan=\"2\">
        <input type=\"button\" value=\"0\" id=\"0\"  =\" num(0)\"
            style=\"height: 70px; width: 190px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\".\" id=\"point\"  =\" num(\'.\')\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
      <td>
        <input type=\"button\" value=\"/\" id=\"division\"
             =\" num(\'/\')\"
            style=\"height: 70px; width: 90px; font-size: 35px\">
      </td>
    </tr>
    <tr>
      <td colspan=\"2\">
        <input type=\"button\" value=\"Del\" id=\"clear\"
             =\" clear()\"
            style=\"height: 70px; width: 190px; font-size: 35px\" />
      </td>
      <td colspan=\"2\">
        <input type=\"button\" value=\"=\" id=\"result\"
             =\" result()\"
            style=\"height: 70px; width: 190px; font-size: 35px\" />
      </td>
    </tr>
  </table>
</body>
</html>

效果图

\"\"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章