前端开发
263
第一种方法:
<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>