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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 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
MySQL修改密码方法总结
2008/03/25 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
windows下Virtualenvwrapper安装教程
2017/12/13 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
对python 调用类属性的方法详解
2019/07/02 Python
python线程池如何使用
2020/05/28 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
介绍Java的内部类
2012/10/27 面试题
建筑施工员岗位职责
2013/11/26 职场文书
教师自荐信
2013/12/10 职场文书
优秀小学生家长评语
2014/01/30 职场文书
房屋继承公证书
2014/04/10 职场文书
社团活动总结范文
2014/04/26 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
李强优秀员工观后感
2015/06/16 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书