html+js实现简单的计算器代码(加减乘除)


Posted in Javascript onJuly 12, 2016

html+js实现简单的计算器代码(加减乘除)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table>
  <tr>
   <td><input type="button" value="add"   onclick="setOp('+', 'add');"/></td>
   <td><input type="button" value="miner" onclick="setOp('-', 'miner');"/></td>
   <td><input type="button" value="times" onclick="setOp('*', 'times');"/></td>
   <td><input type="button" value="divide" onclick="setOp('/', 'divide');"/></td>
  </tr>
</table>
<table id="tb_calc" style="display:none;">
   <tr>
    <td> <input id="x" type="text" style="width:100px" value="" name="x" /></td>
    <td> <lable id="op" name="op"></lable> </td>
    <td> <input id="y" type="text" style="width:100px" value="" name="y" /> </td>
    <td> <input id="opTips" type="button" value="" onclick="calc();"/> </td>
    <td> <lable id="z" name="z"></lable> </td>
  </tr>
</table>
<script type="application/javascript">
  function setOp(op, opTips)
  {
    var tb=document.getElementById("tb_calc");
    tb.style.display = "none";
          
    document.getElementById("x").value = ""; 
    document.getElementById("y").value = ""; 
    document.getElementById("z").innerText = ""; 
    document.getElementById("op").innerText = op;
    document.getElementById("opTips").value = opTips;
    
    tb.style.display = "block";
  }
  function calc()
  {
    var x = parseInt(document.getElementById("x").value); 
    var y = parseInt(document.getElementById("y").value);
    var op = document.getElementById("op").innerText;
    
    var z = "";
    switch(op)
    {
      case '+':
        z = x + y;
        break;
      case '-':
        z = x - y;
        break;
      case '*': ;
        z = x * y;
        break;
      case '/': ;
        z = x / y;
        break;
      default:
        z = '';
    }
    console.log(x, op, y, '=', z);
    document.getElementById("z").innerText = z;
  }
</script>
</body>
</html>

截图如下:

html+js实现简单的计算器代码(加减乘除)

以上这篇html+js实现简单的计算器代码(加减乘除)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
webpack入门+react环境配置
Feb 08 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 #Javascript
javascript加减乘除的简单实例
Jul 12 #Javascript
浅谈javascript中的加减时间
Jul 12 #Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 #Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 #Javascript
Angular 路由route实例代码
Jul 12 #Javascript
javascript中获取class的简单实现
Jul 12 #Javascript
You might like
简单的php写入数据库类代码分享
2011/07/26 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP加密解密实例分析
2015/12/25 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
python实现五子棋程序
2020/04/24 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
英国网上超市:Ocado
2020/03/05 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
小小的船教学反思
2014/02/21 职场文书
大学老师推荐信
2014/02/25 职场文书
师德建设实施方案
2014/03/21 职场文书
教师节横幅标语
2014/10/08 职场文书
个人作风建设心得体会
2014/10/22 职场文书
公务员考察材料
2014/12/23 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL