JavaScript实现的超简单计算器功能示例


Posted in Javascript onDecember 23, 2017

本文实例讲述了JavaScript实现的超简单计算器功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

JavaScript实现的超简单计算器功能示例

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com JS计算器</title>
  <script type="text/javascript">
   // window.onload 获取元素getElementById
    window.onload = function(){
      var oTxt1 = document.getElementById('val01');
      var oTxt2 = document.getElementById('val02');
      var oFuhao = document.getElementById('fuhao');
      // 这三个要放在button函数里面,因为s1.value是获取input里面的输入,但是这个时候还没有输入了
      // var iNum1 = oTxt1.value;
      // var iNum2 = oTxt2.value;
      // var iNum3 = oFuhao.value;
      oBtn = document.getElementById('btn');


 // 计算按钮点击事件
      oBtn.onclick = function(){
        var iNum1 = oTxt1.value;
        var iNum2 = oTxt2.value;
        var iNum3 = oFuhao.value;
        var iResult;





//如果两个输入有一个是空的话




//return是让if里面执行结束
        if (iNum1=='' || iNum2=='') {
          alert('不能为空');
          return;
        }




//isNaN() 如果是true,说明是非数字,所以如果两个输入中有非数字,就提示alert
        if (isNaN(iNum1) || isNaN(iNum2)) {
          alert('不能有字母');
          return;
        }




//对+-*/四个操作对应的value进行判断




//如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数
        if (iNum3 == 0) {
          iResult = parseInt(iNum1) + parseInt(iNum2)
        }
        else if (iNum3 == 1) {
          iResult = parseInt(iNum1) - parseInt(iNum2)
        }
        else if (iNum3 == 2) {
          iResult = parseInt(iNum1) * parseInt(iNum2)
        }
        else if (iNum3 == 3) {
          iResult = parseInt(iNum1)/parseInt(iNum2)
        }
        alert(iResult);
      }
    }
  </script>
</head>
<body>
  <h3>计算器</h3>
  <input type="text" id="val01">
  <select id="fuhao">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">*</option>
    <option value="3">/</option>
  </select>
  <input type="text" id="val02">
  <input type="button" id="btn" value="计算">
</body>
</html>

PS:这里再为大家推荐几款计算工具供大家进一步参考借鉴:

在线一元函数(方程)求解计算工具:
http://tools.3water.com/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算:
http://tools.3water.com/jisuanqi/jsqkexue

在线计算器_标准计算器:
http://tools.3water.com/jisuanqi/jsq

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
JS中的防抖与节流及作用详解
Apr 01 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
微信小程序入门之指南针
Oct 22 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
JavaScript实现音乐播放器
Aug 14 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 #Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 #Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 #Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 #Javascript
原生JS写Ajax的请求函数功能
Dec 22 #Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 #Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 #Javascript
You might like
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
js中this对象用法分析
2018/01/05 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
Python抓取百度查询结果的方法
2015/07/08 Python
tensorflow识别自己手写数字
2018/03/14 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python能做什么
2020/06/02 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python 装饰器的基本使用
2021/01/13 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
学校就业推荐信范文
2014/05/19 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
新闻编辑求职信
2014/07/13 职场文书
爱牙日活动总结
2014/08/29 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年关工委工作总结
2014/11/17 职场文书