JavaScript实现的超简单计算器功能示例-偶像资源网

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

先来看看运行效果：

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

具体代码：

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title>www.freexyz.cn 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.freexyz.cn/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算：
http://tools.freexyz.cn/jisuanqi/jsqkexue

在线计算器_标准计算器：
http://tools.freexyz.cn/jisuanqi/jsq

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论