JavaScript を使用して電卓を実装する方法-jsチュートリアル-php.cn

JavaScript を使用して電卓を実装する方法

亚连

リリース： 2018-06-15 23:17:34

オリジナル

1650 人が閲覧しました

この記事では、基本的な四則演算を実現することができる、検証機能を備えた超簡単な計算機関数を主に紹介します。コードには、理解しやすいように詳細なコメントが付いています。この記事での例はJavaScriptで実装された超シンプルな電卓関数です。参考のために皆さんと共有してください。詳細は次のとおりです:

まずランニング効果を見てみましょう:

特定のコード:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net JS计算器</title>
  <script type="text/javascript">
   // window.onload 获取元素getElementById
    window.onload = function(){
      var oTxt1 = document.getElementById(&#39;val01&#39;);
      var oTxt2 = document.getElementById(&#39;val02&#39;);
      var oFuhao = document.getElementById(&#39;fuhao&#39;);
      // 这三个要放在button函数里面，因为s1.value是获取input里面的输入，但是这个时候还没有输入了
      // var iNum1 = oTxt1.value;
      // var iNum2 = oTxt2.value;
      // var iNum3 = oFuhao.value;
      oBtn = document.getElementById(&#39;btn&#39;);
　　　　　　　// 计算按钮点击事件
      oBtn.onclick = function(){
        var iNum1 = oTxt1.value;
        var iNum2 = oTxt2.value;
        var iNum3 = oFuhao.value;
        var iResult;
　　　　　　　　　　//如果两个输入有一个是空的话　　　　　　　　　　//return是让if里面执行结束
        if (iNum1==&#39;&#39; || iNum2==&#39;&#39;) {
          alert(&#39;不能为空&#39;);
          return;
        }　　　　　　　　　　//isNaN() 如果是true，说明是非数字，所以如果两个输入中有非数字，就提示alert
        if (isNaN(iNum1) || isNaN(iNum2)) {
          alert(&#39;不能有字母&#39;);
          return;
        }　　　　　　　　　　//对+-*/四个操作对应的value进行判断　　　　　　　　　　//如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数
        if (iNum3 == 0) {
          iResult = parseInt(iNum1) + parseInt(iNum2)
        }
        else if (iNum3 == 1) {
          iResult = parseInt(iNum1) - parseInt(iNum2)
        }
        else if (iNum3 == 2) {
          iResult = parseInt(iNum1) * parseInt(iNum2)
        }
        else if (iNum3 == 3) {
          iResult = parseInt(iNum1)/parseInt(iNum2)
        }
        alert(iResult);
      }
    }
  </script>
</head>
<body>
  <h3>计算器</h3>
  <input type="text" id="val01">
  <select id="fuhao">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">*</option>
    <option value="3">/</option>
  </select>
  <input type="text" id="val02">
  <input type="button" id="btn" value="计算">
</body>
</html>

ログイン後にコピー

上記は私が編集したテキストです。誰にとっても役立つ

JS でランダムにスクランブルされた配列を生成する方法

vue の共通コンポーネントとフレームワーク構造 (詳細なチュートリアル)

anime.js でアニメーション化されたチェックボックスを実装する方法

以上がJavaScript を使用して電卓を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。