简易计算器

实现效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简易计算器</title>
</head>
<body>
  <input id="txt1" type="text">
  <select id="txt2" name="" id="">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input id="txt3" type="text">
  <input id="btn" type="button" value="=">
  <input id="txt4" type="text">
  <script>
    var txt1=document.getElementById("txt1");
    var txt2=document.getElementById("txt2");
    var txt3=document.getElementById("txt3");
    var txt4=document.getElementById("txt4");
    var btn=document.getElementById("btn");

    var result=0;// 定义一个变量存放计算器算出的值
    // 点击等号按钮时,算出我们需要的值输出
    btn.onclick=function(){
      var a=parseFloat(txt1.value);
      var b=parseFloat(txt3.value);
      // 在input里面输入的内容是写在value里面的,parseFloat——小数依然适用
      var c=txt2.value;// txt2.value指的是+、-、*、/

      // 利用switch语句完成,当我们选择加减乘除里面其中一个时,符号两边的input里的value值是进行此运算
      switch(c){
        case "+":result=a+b;
        break;
        case "-":result=a-b;
        break;
        case "*":result=a*b;
        break;
        case "/":result=a/b;
        break;
      }
      // 将算出来的值赋到等号后面的input的里面输出
       txt4.value=result;

    }
  </script>
</body>
</html>

posted on 2017-04-08 11:50  cqt123  阅读(172)  评论(0编辑  收藏  举报

导航