编程 Javascript

简单实现JS计算器功能

Posted in Javascript onDecember 21, 2016

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

效果图：

简单实现JS计算器功能

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计算器功能

- Author -

MyLearnCSDN

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的一行代码轻松实现拖动效果

Dec 28 Javascript

jQuery实现选项联动轮播效果【附实例】

Apr 19 Javascript

修改ligerui 默认确认按钮的方法

Dec 27 Javascript

jQuery排序插件tableSorter使用方法

Feb 10 Javascript

基于js 本地存储(详解)

Aug 16 Javascript

微信小程序实现tab切换效果

Nov 21 Javascript

Vue实现表格中对数据进行转换、处理的方法

Sep 06 Javascript

Vue指令指令大全

Feb 09 Javascript

vue.js路由mode配置之去掉url上默认的#方法

Nov 01 Javascript

详解Vue的ref特性的使用

Jan 24 Javascript

Vue项目中使用flow做类型检测的方法

Mar 18 Javascript

js实现圆形菜单选择器

Dec 03 Javascript

jQuery实现立体式数字滚动条增加效果

Dec 21 #Javascript

Bootstrap Search Suggest使用例子

Dec 21 #Javascript

简单实现Bootstrap标签页

Aug 09 #Javascript

获取JavaScript异步函数的返回值

Dec 21 #Javascript

bootstrap实现图片自动轮播

Dec 21 #Javascript

详解JavaScript时间处理之几个月前或几个月后的指定日期

Dec 21 #Javascript

详解前端自动化工具gulp自动添加版本号

Dec 20 #Javascript