HTML と JS は単純な計算機を実装します-htmlチュートリアル-php.cn

HTML と JS は単純な計算機を実装します

小云云

リリース： 2018-03-05 15:09:34

オリジナル

2068 人が閲覧しました

HTML と JS で計算機関数を実装することも非常に簡単です。この記事では主に HTML と JS で単純な計算機を実装する方法について説明します。

以下はコードです:

   <!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>

ログイン後にコピー

関連する推奨事項:
HTMLで単純な電卓を実装する方法

jsで単純な四則演算の電卓関数を実装する

単純な四則演算のJS実装電卓機能の例

以上がHTML と JS は単純な計算機を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。