陈占占
陈占占
Published on 2018-10-16 / 43 Visits
0
0

AngularJS 简单加减乘除

第一种方法:

  <div ng-app="">
      <div>
          <!--文本-->
          <input type="number" ng-model="A" placeholder="  输入数字1">
          {{a}}
          <input type="number" ng-model="B" placeholder="  输入数字2">
          =
          <!--//四个答案-->
          <h2 id="a1" style="display:none" onclick="w1()">{{A+B}}</h2>
          <h2 id="a2" style="display:none" onclick="w2()">{{A-B}}</h2>
          <h2 id="a3" style="display:none" onclick="w3()">{{A*B}}</h2>
          <h2 id="a4" style="display:none" onclick="w4()">{{A/B}}</h2>
      </div>
      <div>
          <!--// 四个按钮 加减乘除 点击哪一个显示哪一个-->
          <button id="AA" ng-click="a='+'">+</button>
          <button id="BB" ng-click="a='-'">-</button>
          <button id="CC" ng-click="a='*'">*</button>
          <button id="DD" ng-click="a='/'">/</button>
      </div>
 
      <script type="text/javascript">
          // <!-- 点击显示的,隐藏其它的-->
          var AA = document.getElementById("AA");
          var q = document.getElementById("a1");
          var BB = document.getElementById("BB");
          var w = document.getElementById("a2");
          var CC = document.getElementById("CC");
          var e = document.getElementById("a3");
          var DD = document.getElementById("DD");
          var r = document.getElementById("a4");
 
          AA.onclick=function(){
              q.style.display = "block";
              w.style.display = "none";
              e.style.display = "none";
              r.style.display = "none";
          }
          BB.onclick=function(){
              q.style.display = "none";
              w.style.display = "block";
              e.style.display = "none";
              r.style.display = "none";
          }
          CC.onclick=function(){
              q.style.display = "none";
              w.style.display = "none";
              e.style.display = "block";
              r.style.display = "none";
          }
          DD.onclick=function(){
              q.style.display = "none";
              w.style.display = "none";
              e.style.display = "none";
              r.style.display = "block";
          }
      </script>
   </div>

第二种方法:

    <div ng-app="" >
        <div>
            <button ng-click="a='+';C = A+B">+</button>
            <button ng-click="a='-';C = A-B">-</button>
            <button ng-click="a='*';C = A*B">*</button>
            <button ng-click="a='/';C = A/B">/</button>
        </div>
        <div>
            <input type="number" ng-model="A" placeholder="  输入数字1">
            {{a}}
            <input type="number" ng-model="B" placeholder="  输入数字2">
            =
            <input type="number" value="{{C}}" placeholder="  输入数字2">
        </div>
    </div>


Comment