脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js html实现计算器功能

js html实现计算器功能

 更新时间：2018年11月13日 17:01:44   作者：~李疆  
这篇文章主要为大家详细介绍了js html实现计算器功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

效果图

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

您可能感兴趣的文章:

相关文章

  • Javascript事件热键兼容ie|firefox

    Javascript事件热键兼容ie|firefox

    Javascript热键兼容ie，firefox，需要的朋友可以参考下。
    2010-12-12
  • 前端图片懒加载的原理与3种实现方式举例

    前端图片懒加载的原理与3种实现方式举例

    图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力,下面这篇文章主要给大家介绍了关于前端图片懒加载的原理与3种实现方式的相关资料,需要的朋友可以参考下
    2023-03-03
  • javascript获取元素离文档各边距离的方法

    javascript获取元素离文档各边距离的方法

    这篇文章主要介绍了javascript获取元素离文档各边距离的方法,以一个自定义函数形式分析了javascript针对文档各边距离的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • createElement动态创建HTML对象脚本代码

    createElement动态创建HTML对象脚本代码

    利用createElement动态创建链接，div等代码
    2008-11-11
  • JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

    JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

    在新浪微博首页看到每条微博后边显示的时间并不是标准的年-月-日格式，而是经过换算的时间差，如：发表于5分钟前、发表于“2小时前”，比起标准的时间显示格式，貌似更加直观和人性化
    2014-04-04
  • js评分组件使用详解

    js评分组件使用详解

    这篇文章主要为大家介绍了js评分组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Javascript 继承机制的实现

    Javascript 继承机制的实现

    要用ECMAScript实现继承机制，首先从基类入手。所有开发者定义的类都可作为基类。出于安全原因，本地类和宿主类不能作为基类，这样可以防止公用访问编译过的浏览器级的代码，因为这些代码可以被用于恶意攻击。
    2009-08-08
  • 纯JavaScript实现樱花飘落效果的示例代码

    纯JavaScript实现樱花飘落效果的示例代码

    这篇文章主要为大家详细介绍了如何纯JavaScript实现樱花飘落效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • JavaScript实现鼠标滑过处生成气泡的方法

    JavaScript实现鼠标滑过处生成气泡的方法

    这篇文章主要介绍了JavaScript实现鼠标滑过处生成气泡的方法,涉及鼠标事件与页面样式的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • 如何利用javascript接收json信息并进行处理

    如何利用javascript接收json信息并进行处理

    这篇文章主要介绍了如何利用javascript接收json信息并进行处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论