注意:该计算器只能进行个位数的加减乘除
思路要点:(1)在读取按键的数字的时候,通过 :for循环下的 集合【i】.onclick=function(){ 变量=this.innerHTML}来取得,必须要使用“this”来代替 “被取集合【i】”,否则无法取到值,应该是由于“集合【i】”被设置了onclick=function函数的原因。
(2)然后在取到按键数字的同时判断按键次数,创造变量接收第一次,第二次,第三次取到的字符。同时判断第二次取到的加减乘除号,分情况进行计算。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } #bigk{ width: 320px; height: 450px; background-color: gainsboro; border-radius: 8px; box-shadow: 5px 5px 5px darkgray; margin-top: 30px; border: 1px solid black; overflow: hidden; } #sck{ width: 312px; height: 30px; border: 1px solid black; margin-top: 10px; background-color: gainsboro; border-radius: 4px; } .hengk{ width: 312px; height:100px ; } .xiaok{ float: left; width: 70px; height: 90px; border: 1px solid black; margin-top: 5px; margin-left: 5px; font-size: 24px; font-weight: bolder; text-align: center; line-height: 90px; border-radius: 4px; } .xiaok:hover{ cursor: pointer; box-shadow: 3px 3px darkgray; } </style> </head> <body> <div id="bigk"> <div id="sck"> <input type="text" value="" style="width: 312px;height: 30px;border: none;background-color:gainsboro ;"/> </div> <div class="hengk"> <div class="xiaok">7</div> <div class="xiaok">8</div> <div class="xiaok">9</div> <div class="xiaok">/</div> </div> <div class="hengk"> <div class="xiaok">4</div> <div class="xiaok">5</div> <div class="xiaok">6</div> <div class="xiaok">*</div> </div> <div class="hengk"> <div class="xiaok">1</div> <div class="xiaok">2</div> <div class="xiaok">3</div> <div class="xiaok">-</div> </div> <div class="hengk"> <div class="xiaok">0</div> <div class="xiaok">.</div> <div class="xiaok">=</div> <div class="xiaok">+</div> </div> </div> </body> </html> <script type="text/javascript"> var num = document.getElementsByClassName("xiaok"); var a = 0; var b = 0; var c = 0; var biao = 0 for(var i = 0 ;i<num.length;i++){ num[i].onclick=function(){ biao++; document.getElementsByTagName("input")[0].value+=this.innerHTML; if(biao ==1){ a =Number(this.innerHTML) ; }else if(biao==2){ b= this.innerHTML; }else if(biao==3){ c = Number(this.innerHTML); } if(this.innerHTML=="="){ switch (b) { case"+":document.getElementsByTagName("input")[0].value=a+c;break; case"-":document.getElementsByTagName("input")[0].value=a-c;break; case"*":document.getElementsByTagName("input")[0].value=a*c;break; case"/":document.getElementsByTagName("input")[0].value=a/c;break; } } } } </script>