Maison > Article > interface Web > Comment implémenter une calculatrice en utilisant JavaScript

Comment implémenter une calculatrice en utilisant JavaScript

亚连original: 2018-06-15 23:17:341665parcourir

Cet article présente principalement la fonction de calculatrice ultra-simple implémentée en JavaScript, qui peut réaliser les quatre opérations arithmétiques de base et dispose de fonctions de vérification. Le code est équipé de commentaires plus détaillés pour une compréhension facile. Les amis dans le besoin peuvent s'y référer. 🎜>

L'exemple de cet article décrit la fonction de calculatrice ultra-simple implémentée en JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique :

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

Ce qui précède est le texte que j'ai compilé, j'espère qu'il sera utile à tout le monde

Articles Liés

Voir plus