简单实现JS计算器功能

该计算器功能： 1.校验：小数点，重复计算，以及大量更符合用户体验的操作。 2.能够从键盘输入。

HTML代码：

rush:xhtml;"> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Insert title here

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

rush: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代码：

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,"-"); 
    opFlag = true; 
   }break; 
  case "x":{ 
    upText.value = appendupTextValue(upText.value,"*"); 
    opFlag = true; 
   }break; 
  case "/":{  
    upText.value = appendupTextValue(upText.value,"/"); 
    opFlag = true; 
   }break; 
  } 
} 

function checkdownTextValid(downText){ 
  if(downText.ch<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>t(downText.length-1) == "."){ 
    return downText.substring(0,downText.length-1); 
  }  
  return downText; 
} 

function checkZero(upText,downText){ 
  if(upText.ch<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>t(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){cle<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>llText();} 
  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计算器功能

HTML代码：

css代码：

js代码：

相关推荐