AngularJS 简单加减乘除

帝国吾爱 2022-05-14 14:46:56 阅读数:632

简单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>

 

版权声明:本文为[帝国吾爱]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/qq_39652628/article/details/83067770