该计算器功能：
1.校验：小数点，重复计算，以及大量更符合用户体验的操作。
2.能够从键盘输入。
效果图：
html代码：
css代码：
@CHARSET"UTF-8"; .button { width:73px; height:50px; margin-bottom:5px; border:1pxsolid#ddd; border-radius:1px; font-weight:bold; color:#1e395b; background:aqua; font-size:20px; border-radius:3px; } .text { width:300px; border:1pxsolid#c2c2c2; height:50px; border-radius:5px; font-size:24px; text-align:right; background:#ffffff; margin-top:10px; margin-bottom:10px; } .textShow{ width:300px; border:1pxsolid#c2c2c2; height:40px; border-radius:5px; font-size:18px; text-align:right; background:#ffffff; margin-top:10px; margin-bottom:10px; } .cal{ margin-left:200px; border:2pxsolid#99ccff; margin:100pxauto; position:relative; width:330px; height:420px; border-radius:10px; } .cont{ margin-left:10px; } .funcBtn{ padding-left:580px; border-radius:10px; font-size:20px; position:fixed; }js代码：
/** * */ varcheckEqual =false;//Avoid repetition calcu varopFlag =false;//Check repetition add operation varupText = document.getElementById("upText"); varcal = document.getElementById("cal").style; vardownText = document.getElementById("downText"); functionshow() { cal.display ="block"; } functionhide() { cal.display ="none"; } functionclearAllText() { upText.value =""; downText.value ="0"; opFlag =false; checkEqual =false; } functionoppositeOp(){ downText.value = -downText.value; } functiondeleteOneDigit() { downText.value = downText.value.substring(0, downText.value.length - 1); if(downText.value ==""|| (downText.value.charAt(0) =="-"&& downText.value.charAt(1) =="")) { downText.value ="0"; returndownText.value; } returndownText.value; } functionclickNum(num) { if(num ==".") { checkIfAddPoint(num); }else{ checkIfAddNum(num); } checkEqual =false; } functioncheckIfAddPoint(num) { if((num=="."&& downText.value =="0") || opFlag ==true) { downText.value="0."; opFlag =false; }elseif(num =="."&& downText.value.indexOf(".") > -1) { downText.value; }else{ downText.value += num; } } functioncheckIfAddNum(num) { if((num !="."&& downText.value =="0"&& downText.value[1] !=".") || opFlag ==true || downText.value =="Infinity" || checkEqual ==true) { downText.value = num; opFlag =false; }else{ downText.value += num; } } functionclickOperation(op){ checkEqual =false; downText.value = checkdownTextValid(downText.value); downText.value = checkZero(upText.value,downText.value); switch(op){ case"+":{ upText.value = appendupTextValue(upText.value,downText.value,"+"); opFlag =true; }break; case"-":{ upText.value = appendupTextValue(upText.value,downText.value,"-"); opFlag =true; }break; case"x":{ upText.value = appendupTextValue(upText.value,downText.value,"*"); opFlag =true; }break; case"/":{ upText.value = appendupTextValue(upText.value,downText.value,"/"); opFlag =true; }break; } } functioncheckdownTextValid(downText){ if(downText.charAt(downText.length-1) =="."){ returndownText.substring(0,downText.length-1); } returndownText; } functioncheckZero(upText,downText){ if(upText.charAt(upText.length-1) =="/"&& downText =="0"){ return"Error"; } returndownText; } functionappendupTextValue(oldvalue,newvalue,operation){ if(oldvalue ==""){ returnoldvalue = newvalue+operation; }elseif(opFlag!=true){ returnoldvaluee = oldvalue+newvalue+operation; }else{ returnoldvalue.substring(0, oldvalue.length-1)+operation; } } functioncalcu() { if(!checkEqual){ downText.value = eval(upText.value+downText.value); upText.value =""; checkEqual =true; } } window.document.onkeydown = chooseKey; functionchooseKey(evt){ if(evt.keyCode == 13){alert("=");} elseif(evt.keyCode == 8){deleteOneDigit();} elseif(evt.keyCode == 27){clearAllText();} elseif(evt.keyCode == 48){clickNum("0");} elseif(evt.keyCode == 49){clickNum("1");} elseif(evt.keyCode == 50){clickNum("2");} elseif(evt.keyCode == 51){clickNum("3");} elseif(evt.keyCode == 52){clickNum("4");} elseif(evt.keyCode == 53){clickNum("5");} elseif(evt.keyCode == 54){clickNum("6");} elseif(evt.keyCode == 55){clickNum("7");} elseif(evt.keyCode == 56){clickNum("8");} elseif(evt.keyCode == 57){clickNum("9");} elseif(evt.keyCode == 96){clickNum("0");} elseif(evt.keyCode == 97){clickNum("1");} elseif(evt.keyCode == 98){clickNum("2");} elseif(evt.keyCode == 99){clickNum("3");} elseif(evt.keyCode == 100){clickNum("4");} elseif(evt.keyCode == 101){clickNum("5");} elseif(evt.keyCode == 102){clickNum("6");} elseif(evt.keyCode == 103){clickNum("7");} elseif(evt.keyCode == 104){clickNum("8");} elseif(evt.keyCode == 105){clickNum("9");} elseif(evt.keyCode == 110){clickNum(".");} elseif(evt.keyCode == 106){clickOperation("x");} elseif(evt.keyCode == 107){clickOperation("+");} elseif(evt.keyCode == 111){clickOperation("÷");} elseif(evt.keyCode == 109){clickOperation("-");}
【js如何实现计算器功能js实现计算器功能吗】js如何实现计算器功能？js实现计算器功能的教程
http://m.bbyears.com/wangyezhizuo/116583.html
推荐访问: