相思资源网 Design By www.200059.com

本文实例为大家分享了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实现计算器功能

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

标签:
js,html,计算器

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“js html实现计算器功能”

暂无js html实现计算器功能的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。