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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
javascript实现回到顶部特效
May 06 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
详解JS函数重载
2014/12/04 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
介绍Python中的__future__模块
2015/04/27 Python
python列表的常用操作方法小结
2016/05/21 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Django之模型层多表操作的实现
2019/01/08 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
行政二审代理词
2015/05/25 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers