该计算器功能：
1.校验：小数点，重复计算，以及大量更符合用户体验的操作。
2.能够从键盘输入。
效果图：
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" href="https://www.jb51.net/css/style.css"></link> </head> <body> <!--定义按键表格,每个按键对应一个事件触发--> <div> <form action="./calcuServlet" method="post"> <div> <input type="text" maxlength="10" readonly="readonly" /> <input type="text" value="0" maxlength="10" readonly="readonly" /> <input type="button" value="C" /> <input type="button" value="+/-" /> <input type="button" value="←" /> <input type="button" value="+" /> <input type="button" value="7" /> <input type="button" value="8" /> <input type="button" value="9" /> <input type="button" value="-" /> <input type="button" value="4" /> <input type="button" value="5" /> <input type="button" value="6" /> <input type="button" value="x" /> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="÷" /> <input type="button" value="√" /> <input type="button" value="0" /> <input type="button" value="." /> <input type="button" value="=" /> </div> </form> </div> <div> <input type="button" value="show" /> <input type="button" value="hide" /> </div> <script type="text/javascript" src="https://www.jb51.net/article/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/js/calcu.js"></script> </body> </html>
css代码：
@CHARSET "UTF-8"; .button { width: 73px; height: 50px; margin-bottom: 5px; border: 1px solid #ddd; border-radius: 1px; font-weight: bold; color: #1e395b; background: aqua; font-size:20px; border-radius: 3px; } .text { width: 300px; border: 1px solid #c2c2c2; height: 50px; border-radius: 5px; font-size: 24px; text-align: right; background: #ffffff; margin-top: 10px; margin-bottom: 10px; } .textShow{ width: 300px; border: 1px solid #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:2px solid #99ccff; margin:100px auto; 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代码：
/** * */ var checkEqual = false;//Avoid repetition calcu var opFlag = false; //Check repetition add operation var upText = document.getElementById("upText"); var cal = document.getElementById("cal").style; var downText = document.getElementById("downText"); function show() { cal.display = "block"; } function hide() { cal.display = "none"; } function clearAllText() { upText.value = ""; downText.value = "0"; opFlag = false; checkEqual = false; } function oppositeOp(){ downText.value = -downText.value; } function deleteOneDigit() { downText.value = downText.value.substring(0, downText.value.length - 1); if (downText.value == "" || (downText.value.charAt(0) == "-" && downText.value.charAt(1) == "")) { downText.value = "0"; return downText.value; } return downText.value; } function clickNum(num) { if(num == ".") { checkIfAddPoint(num); } else { checkIfAddNum(num); } checkEqual = false; } function checkIfAddPoint(num) { if((num=="." && downText.value == "0") || opFlag == true) { downText.value="0."; opFlag = false; } else if(num == "." && downText.value.indexOf(".") > -1) { downText.value; } else { downText.value += num; } } function checkIfAddNum(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; } } function clickOperation(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 "https://www.jb51.net/":{ upText.value = appendupTextValue(upText.value,downText.value,"https://www.jb51.net/"); opFlag = true; }break; } } function checkdownTextValid(downText){ if(downText.charAt(downText.length-1) == "."){ return downText.substring(0,downText.length-1); } return downText; } function checkZero(upText,downText){ if(upText.charAt(upText.length-1) == "https://www.jb51.net/" && downText == "0"){ return "Error"; } return downText; } function appendupTextValue(oldvalue,newvalue,operation){ if(oldvalue == ""){ return oldvalue = newvalue+operation; } else if(opFlag!=true){ return oldvaluee = oldvalue+newvalue+operation; } else{ return oldvalue.substring(0, oldvalue.length-1)+operation; } } function calcu() { if(!checkEqual){ downText.value = eval(upText.value+downText.value); upText.value = ""; checkEqual = true; } } window.document.onkeydown = chooseKey; function chooseKey(evt){ if(evt.keyCode == 13){alert("=");} else if(evt.keyCode == 8){deleteOneDigit();} else if(evt.keyCode == 27){clearAllText();} else if(evt.keyCode == 48){clickNum('0');} else if(evt.keyCode == 49){clickNum('1');} else if(evt.keyCode == 50){clickNum('2');} else if(evt.keyCode == 51){clickNum('3');} else if(evt.keyCode == 52){clickNum('4');} else if(evt.keyCode == 53){clickNum('5');} else if(evt.keyCode == 54){clickNum('6');} else if(evt.keyCode == 55){clickNum('7');} else if(evt.keyCode == 56){clickNum('8');} else if(evt.keyCode == 57){clickNum('9');} else if(evt.keyCode == 96){clickNum('0');} else if(evt.keyCode == 97){clickNum('1');} else if(evt.keyCode == 98){clickNum('2');} else if(evt.keyCode == 99){clickNum('3');} else if(evt.keyCode == 100){clickNum('4');} else if(evt.keyCode == 101){clickNum('5');} else if(evt.keyCode == 102){clickNum('6');} else if(evt.keyCode == 103){clickNum('7');} else if(evt.keyCode == 104){clickNum('8');} else if(evt.keyCode == 105){clickNum('9');} else if(evt.keyCode == 110){clickNum('.');} else if(evt.keyCode == 106){clickOperation('x');} else if(evt.keyCode == 107){clickOperation('+');} else if(evt.keyCode == 111){clickOperation('÷');} else if(evt.keyCode == 109){clickOperation('-');}