Maison > Article > interface Web > Le moyen le plus simple d'implémenter la fonction de calculatrice dans JS

Le moyen le plus simple d'implémenter la fonction de calculatrice dans JS

php中世界最好的语言original: 2018-04-13 17:10:262256parcourir

Cette fois, je vais vous présenter la méthode la plus simple pour implémenter la fonction calculatrice avec JS Quelles sont les précautions pour implémenter la fonction calculatrice avec JS Voici des cas pratiques, jetons un coup d'oeil. .

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('val01');
      var oTxt2 = document.getElementById('val02');
      var oFuhao = document.getElementById('fuhao');
      // 这三个要放在button函数里面，因为s1.value是获取input里面的输入，但是这个时候还没有输入了
      // var iNum1 = oTxt1.value;
      // var iNum2 = oTxt2.value;
      // var iNum3 = oFuhao.value;
      oBtn = document.getElementById('btn');
       // 计算按钮点击事件
      oBtn.onclick = function(){
        var iNum1 = oTxt1.value;
        var iNum2 = oTxt2.value;
        var iNum3 = oFuhao.value;
        var iResult;
          //如果两个输入有一个是空的话          //return是让if里面执行结束
        if (iNum1=='' || iNum2=='') {
          alert('不能为空');
          return;
        }          //isNaN() 如果是true，说明是非数字，所以如果两个输入中有非数字，就提示alert
        if (isNaN(iNum1) || isNaN(iNum2)) {
          alert('不能有字母');
          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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Tableau trié aléatoirement JS

Comment choisir les composants et la structure du framework de vue

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS trie le tableau de manière aléatoireArticle suivant：JS trie le tableau de manière aléatoire

Articles Liés

Voir plus