communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Implémentation simple de la fonction de calculatrice JS

Implémentation simple de la fonction de calculatrice JS

高洛峰
Libérer： 2017-01-20 17:05:28
original
1341 Les gens l'ont consulté

Les fonctions de cette calculatrice :
1. Vérification : point décimal, calculs répétés et un grand nombre d'opérations plus conformes à l'expérience utilisateur.
2. Possibilité de saisir à partir du clavier.

code 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>
Copier après la connexion

code 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; 
}
Copier après la connexion

code 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;);}
Copier après la connexion

Ce qui précède est l'intégralité du contenu de ce article, j'espère qu'il sera utile à l'apprentissage de tout le monde, et j'espère que tout le monde soutiendra le site Web PHP en chinois.

Pour plus d'articles sur la simple implémentation des fonctions de la calculatrice JS, veuillez faire attention au site Web PHP chinois !

Étiquettes associées：
js 计算器
source：php.cn
Article précédent：Utilisation de base du swiper (13) Article suivant：Explication détaillée et exemples d'implémentation Javascript de la fonction de temps de la calculatrice (2)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
SQL Count() nécessite également 0 Je n'ai qu'une seule table et je veux compter chaque entrée d'une balise qui commence par ...
Depuis 2024-04-06 19:48:53
0
1
449
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
Ouvrir les documents de calcul à l'aide de window.open() et data: schéma J'ai une page Web qui s'exécute dans un navigateur qui génère un document HTML calculé que...
Depuis 2024-04-06 15:06:34
0
1
378
Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...
Depuis 2024-04-06 13:17:44
0
1
493
Lancez un navigateur transparent pour améliorer l'expérience des applications Web et des PWA [prend en charge HTML, CSS et JavaScript statiques] [permet aux utilisateurs d'afficher les fonds d'écran de nos applications Web/PWA] Je suis un développeur et concepteur front-end junior développant actuellement une applica...
Depuis 2024-04-05 13:50:12
0
1
1367
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal