HTML et JS implémentent une calculatrice simple-tutoriel HTML-php.cn

HTML et JS implémentent une calculatrice simple

小云云

Libérer： 2018-03-05 15:09:34

original

2046 Les gens l'ont consulté

Il est également très simple d'implémenter la fonction de calculatrice en HTML et JS. Cet article vous explique principalement comment implémenter une calculatrice simple en HTML et JS. J'espère qu'il pourra vous aider.

Voici le code :

   <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="untitled.css">
</head>
<script type="text/javascript"> 
        var result="";
          function jisuan(num){
      if(num=="="){
  document.form1.text.value=eval(result);
  }else{
  result=result+num;
  document.form1.text.value=result;
  }
  }
</script>
<body>
<p class="box">
<form action="" class="form1" name="form1">
      <p class="header"> 
         <input type="text" id="text" name="text" class="text"/>
        
          </p>
          <p class="nav">
     <table class="table">
         <tr>
         <td>  <input id="1" style="height:55px; width:55px;" type="button" value="1" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="2" style="height:55px; width:55px;" type="button" value="2" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="3" style="height:55px; width:55px;" type="button" value="3" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="+" style="height:55px; width:55px;" type="button" value="+" onClick="jisuan(this.id)"/> </td>
         </tr>
         <tr>
         <td>  <input id="4" style="height:55px; width:55px;" type="button" value="4" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="5" style="height:55px; width:55px;" type="button" value="5" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="6" style="height:55px; width:55px;" type="button" value="6" onClick="jisuan(this.id)"/> </td>
          <td>  <input id="-" style="height:55px; width:55px;" type="button" value="-" onClick="jisuan(this.id)"/> </td>
         </tr>
         <tr>
         <td>  <input id="7" style="height:55px; width:55px;" type="button" value="7" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="8" style="height:55px; width:55px;" type="button" value="8" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="9" style="height:55px; width:55px;" type="button" value="9" onClick="jisuan(this.id)"/> </td>
          <td>  <input id="*" style="height:55px; width:55px;" type="button" value="*" onClick="jisuan(this.id)"/> </td>
         </tr>
          <tr>
         <td>  <input id="/" style="height:55px; width:55px;" type="button" value="/" onClick="jisuan(this.id)"/> </td>
         <td>  <input id="0" style="height:55px; width:55px;" type="button" value="0" onClick="jisuan(this.id)"/> </td>
          <td>  <input id="." style="height:55px; width:55px;" type="button" value="." onClick="jisuan(this.id)"/></td>
          <td>  <input id="=" style="height:55px; width:55px;" type="button" value="=" onClick="jisuan(this.id)"/> </td>
         </tr>
         </table>
        
         
     </p>
   </form>
 </p>
</body>
</html>

Copier après la connexion

Recommandations associées :
Comment implémenter une calculatrice simple en HTML

Quatre règles simples pour la mise en œuvre de js Fonction de calcul d'opérations

Exemple de fonction simple de calcul de quatre opérations arithmétiques implémentée par JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!