Ejemplo de función simple de calculadora implementada en JavaScript

Este ejemplo muestra cómo implementar una calculadora muy simple en JavaScript. Lo compartimos para que todos lo puedan referenciar, como se muestra a continuación:

Veamos primero el efecto de ejecución:

Código específico:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>es.oldtoolbag.com JS calculadora</title>
  <script type="text/javascript">
   // window.onload obtener elemento getElementById
    window.onload = function(){
      var oTxt1 = document.getElementById('val01');
      var oTxt2 = document.getElementById('val02');
      var oFuhao = document.getElementById('fuhao');
      // estos tres deben estar en la función del botón, porque s1.value es obtener la entrada de input, pero en este momento no hay entrada
      // var iNum1 = oTxt1.value;
      // var iNum2 = oTxt2.value;
      // var iNum3 = oFuhao.value;
      oBtn = document.getElementById('btn');
　　　　　　　// evento de clic del botón de cálculo
      oBtn.onclick = function(){
        var iNum1 = oTxt1.value;
        var iNum2 = oTxt2.value;
        var iNum3 = oFuhao.value;
        var iResult;
　　　　　　　　　　//si una de las dos entradas está vacía　　　　　　　　　　//return hace que el if dentro de él finalice la ejecución
        if (iNum1=='' || iNum2=='') {
          alert('No puede estar vacío');
          return;
        }　　　　　　　　　　//isNaN() si es true, significa que no es un número, por lo que si dos entradas tienen no números, se muestra alert
        if (isNaN(iNum1) || isNaN(iNum2)) {
          alert('No se pueden tener letras');
          return;
        }　　　　　　　　　　//para+-*/se realiza una judgment sobre los value correspondientes a las cuatro operaciones　　　　　　　　　　//si se usa directamente iNum1+iNum2 el resultado de salida es la concatenación de cadenas 12+24 1224 por lo tanto, debe convertirse en un entero parseInt
        if (iNum3 == 0) {
          iResult = parseInt(iNum1) + parseInt(iNum)2)
        }
        else if (iNum3 == 1) {
          iResult = parseInt(iNum1) - parseInt(iNum)2)
        }
        else if (iNum3 == 2) {
          iResult = parseInt(iNum1) * parseInt(iNum)2)
        }
        else if (iNum3 == 3) {
          iResult = parseInt(iNum1)/parseInt(iNum)2)
        }
        alert(iResult);
      }
    }
  </script>
</head>
<body>
  <h3>Calculadora</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="Calcular">
</body>
</html>

PS: Aquí les recomiendo algunas herramientas de cálculo para que puedan consultar y referirse:

Herramienta de cálculo para resolver funciones (ecuaciones) univocas en línea:
http://tools.jb51.net/jisuanqi/equ_jisuanqi

Uso en línea de la calculadora científica_Calculadora avanzada en línea:
http://tools.jb51.net/jisuanqi/jsqkexue

Calculadora en línea_Standard Calculator:
http://tools.jb51.net/jisuanqi/jsq

Los lectores interesados en más contenido relacionado con JavaScript pueden consultar la sección especial de este sitio: 'Resumen de uso de operaciones matemáticas en JavaScript', 'Resumen de técnicas de estructuras de datos y algoritmos en JavaScript', 'Resumen de técnicas de operaciones de arrays en JavaScript', '大全 de operaciones y técnicas relacionadas con eventos en JavaScript', 'Resumen de técnicas de operaciones en DOM en JavaScript' y 'Resumen de técnicas de operaciones de caracteres y cadenas en JavaScript'.

Espero que lo descrito en este artículo pueda ayudar a todos a diseñar programas de JavaScript.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y sube por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado artificialmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará