js html实现计算器功能


Posted in Javascript onNovember 13, 2018

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

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

Javascript 相关文章推荐
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
JavaScript数据类型详解
Apr 01 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
Django使用多数据库的方法
Sep 06 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 #Javascript
小程序登录态管理的方法示例
Nov 13 #Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 #Javascript
vue代码分割的实现(codesplit)
Nov 13 #Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 #Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 #Javascript
checkbox在vue中的用法小结
Nov 13 #Javascript
You might like
使用Sphinx对索引进行搜索
2013/06/25 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python中Selenium模块的使用详解
2020/10/09 Python
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
什么是索引指示器
2012/08/20 面试题
讲座主持词
2014/03/20 职场文书
股指期货心得体会
2014/09/10 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
运动会加油稿
2015/07/22 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
靠谱准确的求职信
2019/04/02 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL