Heim > Web-Frontend > js-Tutorial > Hauptteil

HTML+js implementiert einfachen Rechnercode (Addition, Subtraktion, Multiplikation und Division)

高洛峰
Freigeben: 2017-01-20 17:20:05
Original
5598 Leute haben es durchsucht

html+js implementiert einfachen Rechnercode (Addition, Subtraktion, Multiplikation und 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>
Nach dem Login kopieren

Der Screenshot sieht wie folgt aus:

HTML+js implementiert einfachen Rechnercode (Addition, Subtraktion, Multiplikation und Division)

Der Der obige Artikel „HTML + JS“ ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie die PHP-Chinese-Website häufiger verwenden.

Weitere Artikel zu HTML + JS-Implementierung von einfachem Taschenrechnercode (Addition, Subtraktion, Multiplikation und Division) finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage