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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
如何快速上手Vuex
Feb 14 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jquery foreach使用示例
2013/09/12 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现rest请求api示例
2014/04/22 Python
python黑魔法之参数传递
2016/02/12 Python
Django中URL的参数传递的实现
2019/08/04 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
详解如何修改python中字典的键和值
2020/09/29 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
小学校园活动策划
2014/01/30 职场文书
干部考察材料范文
2014/12/24 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
二审代理词范文
2015/05/25 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android