recherche

Maison >interface Web >js tutoriel >HTML js implémente un code de calculatrice simple (addition, soustraction, multiplication et division)

HTML js implémente un code de calculatrice simple (addition, soustraction, multiplication et division)

高洛峰
高洛峰original
2017-01-20 17:20:055607parcourir

html js implémente un code de calculatrice simple (addition, soustraction, multiplication et division)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table>
  <tr>
   <td><input type="button" value="add"   onclick="setOp(&#39;+&#39;, &#39;add&#39;);"/></td>
   <td><input type="button" value="miner" onclick="setOp(&#39;-&#39;, &#39;miner&#39;);"/></td>
   <td><input type="button" value="times" onclick="setOp(&#39;*&#39;, &#39;times&#39;);"/></td>
   <td><input type="button" value="divide" onclick="setOp(&#39;/&#39;, &#39;divide&#39;);"/></td>
  </tr>
</table>
<table id="tb_calc" style="display:none;">
   <tr>
    <td> <input id="x" type="text" style="width:100px" value="" name="x" /></td>
    <td> <lable id="op" name="op"></lable> </td>
    <td> <input id="y" type="text" style="width:100px" value="" name="y" /> </td>
    <td> <input id="opTips" type="button" value="" onclick="calc();"/> </td>
    <td> <lable id="z" name="z"></lable> </td>
  </tr>
</table>
<script type="application/javascript">
  function setOp(op, opTips)
  {
    var tb=document.getElementById("tb_calc");
    tb.style.display = "none";
           
    document.getElementById("x").value = ""; 
    document.getElementById("y").value = ""; 
    document.getElementById("z").innerText = ""; 
    document.getElementById("op").innerText = op;
    document.getElementById("opTips").value = opTips;
     
    tb.style.display = "block";
  }
  function calc()
  {
    var x = parseInt(document.getElementById("x").value); 
    var y = parseInt(document.getElementById("y").value);
    var op = document.getElementById("op").innerText;
     
    var z = "";
    switch(op)
    {
      case &#39;+&#39;:
        z = x + y;
        break;
      case &#39;-&#39;:
        z = x - y;
        break;
      case &#39;*&#39;: ;
        z = x * y;
        break;
      case &#39;/&#39;: ;
        z = x / y;
        break;
      default:
        z = &#39;&#39;;
    }
    console.log(x, op, y, &#39;=&#39;, z);
    document.getElementById("z").innerText = z;
  }
</script>
</body>
</html>

La capture d'écran est la suivante :

html js实现简单的计算器代码(加减乘除)

Ce qui précède l'article est simple à implémenter en html js Le code de la calculatrice (addition, soustraction, multiplication et division) est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et j'espère aussi que vous accorderez plus d'attention au PHP. Site chinois.

Pour plus d'articles sur l'implémentation HTML js du code de calculatrice simple (addition, soustraction, multiplication et division), veuillez faire attention au site Web PHP chinois !

Déclaration：
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
Article précédent：Exemple d'une calculatrice Web simple pouvant changer les couleurs de manière aléatoire à l'aide de javascriptArticle suivant：Exemple d'une calculatrice Web simple pouvant changer les couleurs de manière aléatoire à l'aide de javascript

Articles Liés

Voir plus