简单实现JS计算器功能

2019-11-19 18:22:09

字体：大中小

来源：转载

供稿：网友

该计算器功能：
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" rel="stylesheet" href="css/style.css"></link> </head> <body>   <!--定义按键表格,每个按键对应一个事件触发-->   <div id="cal" class="cal">     <form action="./calcuServlet" method="post" id="toCalcu">       <div class="cont">       <input id="upText" class="textShow" type="text" name="process"           maxlength="10" readonly="readonly" />        <input id="downText" class="text" type="text" name="text" value="0"          maxlength="10" readonly="readonly" />                  <input type="button" class="button" name="deleteAll" value="C" onclick="clearAllText()" />       <input type="button" class="button" name="opposite" value="+/-" onclick="oppositeOp()" />        <input type="button" class="button" name="delOne" value="←" onclick="deleteOneDigit()" />        <input type="button" class="button" name="Add" value="+" onclick="clickOperation('+')" />            <input type="button" class="button" name="seven" value="7" onclick="clickNum(7)" />       <input type="button" class="button" name="eight" value="8" onclick="clickNum(8)" />       <input type="button" class="button" name="nine" value="9" onclick="clickNum(9)" />       <input type="button" class="button" name="Reduce" value="-" onclick="clickOperation('-')" />       <input type="button" class="button" name="Four" value="4" onclick="clickNum(4)" />       <input type="button" class="button" name="Five" value="5" onclick="clickNum(5)" />       <input type="button" class="button" name="Sex" value="6" onclick="clickNum(6)" />        <input type="button" class="button" name="Multip" value="x" onclick="clickOperation('x')" />       <input type="button" class="button" name="One" value="1" onclick="clickNum(1)" />        <input type="button" class="button" name="Two" value="2" onclick="clickNum(2)" />       <input type="button" class="button" name="Three" value="3" onclick="clickNum(3)" />       <input type="button" class="button" name="Division" value="÷" onclick="clickOperation('/')" />       <input type="button" class="button" name="opposite" value="√" onclick="more()" />          <input type="button" class="button" name="Zero" value="0" onclick="clickNum(0)" />       <input type="button" class="button" name="Point" value="." onclick="clickNum('.')" />       <input type="button" class="button" name="Equal" value="=" onclick="calcu()" />        </div>     </form>    </div>   <div class="funcBtn">     <input type="button" id="show" class="button" value="show" onclick="show()" /> <input       type="button" id="hide" class="button" value="hide" onclick="hide()" />   </div>    <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./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 "/":{          upText.value = appendupTextValue(upText.value,downText.value,"/");         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) == "/" && 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('-');}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS无缝滚动效果实现方法分析

下一篇：jQuery实现立体式数字滚动条增加效果