欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-21 07:53:53
本文实例讲述了javascript实现的超简单计算器功能。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码:

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

先来看看运行效果:

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

具体代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>www.jb51.net 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:这里再为大家推荐几款计算工具供大家进一步参考借鉴:

在线一元函数(方程)求解计算工具:

科学计算器在线使用_高级计算器在线计算:

在线计算器_标准计算器:

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

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