Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter une calculatrice en utilisant JavaScript

亚连
Libérer: 2018-06-15 23:17:34
original
1650 Les gens l'ont consulté

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>
Copier après la connexion
Ce qui précède est le texte que j'ai compilé, j'espère qu'il sera utile à tout le monde

Articles connexes :

Comment générer un tableau brouillé aléatoire dans JS

Composants communs et structures de framework dans vue (tutoriel détaillé)

Comment implémenter des cases à cocher animées dans anime.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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!