지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JS 계산기 기능의 간단한 구현

JS 계산기 기능의 간단한 구현

高洛峰
풀어 주다： 2017-01-20 17:05:28
원래의
1352명이 탐색했습니다.

이 계산기의 기능:
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(&#39;+&#39;)" />      
      <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(&#39;-&#39;)" /> 
      <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(&#39;x&#39;)" /> 
      <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(&#39;/&#39;)" /> 
      <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(&#39;.&#39;)" /> 
      <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(&#39;0&#39;);} 
      else if(evt.keyCode == 49){clickNum(&#39;1&#39;);} 
      else if(evt.keyCode == 50){clickNum(&#39;2&#39;);} 
      else if(evt.keyCode == 51){clickNum(&#39;3&#39;);} 
      else if(evt.keyCode == 52){clickNum(&#39;4&#39;);} 
      else if(evt.keyCode == 53){clickNum(&#39;5&#39;);} 
      else if(evt.keyCode == 54){clickNum(&#39;6&#39;);} 
      else if(evt.keyCode == 55){clickNum(&#39;7&#39;);} 
      else if(evt.keyCode == 56){clickNum(&#39;8&#39;);} 
      else if(evt.keyCode == 57){clickNum(&#39;9&#39;);} 
      else if(evt.keyCode == 96){clickNum(&#39;0&#39;);} 
      else if(evt.keyCode == 97){clickNum(&#39;1&#39;);} 
      else if(evt.keyCode == 98){clickNum(&#39;2&#39;);} 
      else if(evt.keyCode == 99){clickNum(&#39;3&#39;);} 
      else if(evt.keyCode == 100){clickNum(&#39;4&#39;);} 
      else if(evt.keyCode == 101){clickNum(&#39;5&#39;);} 
      else if(evt.keyCode == 102){clickNum(&#39;6&#39;);} 
      else if(evt.keyCode == 103){clickNum(&#39;7&#39;);} 
      else if(evt.keyCode == 104){clickNum(&#39;8&#39;);} 
      else if(evt.keyCode == 105){clickNum(&#39;9&#39;);} 
      else if(evt.keyCode == 110){clickNum(&#39;.&#39;);} 
      else if(evt.keyCode == 106){clickOperation(&#39;x&#39;);} 
      else if(evt.keyCode == 107){clickOperation(&#39;+&#39;);} 
      else if(evt.keyCode == 111){clickOperation(&#39;÷&#39;);} 
      else if(evt.keyCode == 109){clickOperation(&#39;-&#39;);}
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 될 것이며, 모든 사람이 PHP 중국어 웹사이트를 지원하기를 바랍니다.

간단한 JS 계산기 기능 구현과 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!

관련 라벨：
js 计算器
원천：php.cn
이전 기사：스와이프의 기본 사용법 (13) 다음 기사：계산기 시간 함수의 Javascript 구현에 대한 자세한 설명 및 예(2)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
SQL Count()에도 0이 필요합니다. 테이블이 하나만 있고 0으로 시작하는 태그의 각 항목을 계산하고 싶습니다. 이제 다음을 시도합니다. SELECT tag,COUNT(start)ASAnzahl,us...
에서 2024-04-06 19:48:53
0
1
449
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
window.open() 및 data: 구성표를 사용하여 계산 문서 열기 새 브라우저 탭에서 열려는 계산된 HTML 문서를 생성하는 브라우저에서 실행되는 웹 페이지가 있습니다. 간단하고 지저분한 방법은 다음과 같이 하는 것입니다: co...
에서 2024-04-06 15:06:34
0
1
378
Nuxt.js로 생성된 대시보드를 배포하기 위해 SSG를 사용해야 합니까? Nuxt.js를 사용하여 내부용 대시보드를 개발하겠습니다. 내부 대시보드이므로 범용 스키마가 필요하지 않습니다. 일반적으로 대부분의 대시보드는 SPA에서 개발됩니...
에서 2024-04-06 13:17:44
0
1
493
웹 애플리케이션 및 PWA의 경험을 개선하기 위해 투명한 브라우저를 실행합니다. [정적 HTML, CSS 및 JavaScript 지원] [사용자가 웹 애플리케이션/PWA에서 데스크탑 배경화면을 볼 수 있도록 허용] 저는 현재 소켓을 사용하여 웹 애플리케이션(채팅)을 개발하고 있는 주니어 프런트 엔드 개발자이자 디자이너입니다. 나와 친구들이 사용하는 언어는 Scala, HTM...
에서 2024-04-05 13:50:12
0
1
1367
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿