Steven es el mejor
unknown
plain_text
a year ago
8.0 kB
7
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Calculadora Científica</title> <style> /* Estilos para la apariencia visual */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .calculator { width: 348px; padding: 20px; background: linear-gradient(135deg, #f6f6f6, #e0e0e0); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); animation: breathe 4s infinite; } @keyframes breathe { 0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 0, 0, 0.5); } 16.666%, 83.333% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 165, 0, 0.5); } 33.333%, 66.666% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 0, 0.5); } 50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 128, 0, 0.5); } 66.666%, 33.333% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 255, 0.5); } 83.333%, 16.666% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(75, 0, 130, 0.5); } } input[type="text"] { width: 90%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } .btn { display: inline-block; width: 70px; height: 40px; margin: 5px; text-align: center; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; background-color: #f9f9f9; transition: background-color 0.3s; } .btn:hover { background-color: #eaeaea; } #equals { background-color: green; color: white; } </style> </head> <body> <div class="calculator"> <form method="post"> <input type="text" name="expression" id="display" value="<?= $_POST['expression'] ?? '' ?>"> <div> <!-- Botones numéricos y operadores --> <div> <div class="btn" onclick="appendText('7')">7</div> <div class="btn" onclick="appendText('8')">8</div> <div class="btn" onclick="appendText('9')">9</div> <div class="btn" onclick="appendText('/')">/</div> </div> <div> <div class="btn" onclick="appendText('4')">4</div> <div class="btn" onclick="appendText('5')">5</div> <div class="btn" onclick="appendText('6')">6</div> <div class="btn" onclick="appendText('*')">*</div> </div> <div> <div class="btn" onclick="appendText('1')">1</div> <div class="btn" onclick="appendText('2')">2</div> <div class="btn" onclick="appendText('3')">3</div> <div class="btn" onclick="appendText('-')">-</div> </div> <div> <div class="btn" onclick="appendText('0')">0</div> <div class="btn" onclick="appendText('.')">.</div> <button class="btn" id="equals" name="equals" type="submit">=</button> <div class="btn" onclick="appendText('+')">+</div> </div> <!-- botones científicos --> <div> <div class="btn" onclick="appendText('Math.sqrt(')">√</div> <div class="btn" onclick="calculatePower(2)">x²</div> <div class="btn" onclick="calculatePower(3)">x³</div> <div class="btn" onclick="appendText('**')">^</div> <div class="btn" onclick="appendText('Math.exp(')">eˣ</div> <div class="btn" onclick="appendText('Math.log10(')">log</div> <div class="btn" id="clear" onclick="clearDisplay()">C</div> <div class="btn" onclick="appendText('(')">(</div> <div class="btn" onclick="appendText(')')">)</div> </div> </div> </form> </div> <?php // Comprobar si se ha enviado un formulario POST y si existe una expresión if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['expression'])) { $expression = $_POST['expression']; // Obtener la expresión del formulario $result = ''; // Inicializar la variable para el resultado if ($expression !== '') { // Calcular la expresión llamando a la función calculateExpression $result = calculateExpression($expression); echo "<script>console.log('Resultado: $result');</script>"; // Imprimir resultado en consola } } // Definición de la función para calcular la expresión matemática function calculateExpression($expression) { try { // Reemplazar ciertos caracteres para que sean evaluables $expression = str_replace('^', '**', $expression); // Reemplazar '^' con '**' $expression = str_replace('**2', '**2', $expression); // Reemplazar '**2' con '**2' $expression = str_replace('**3', '**3', $expression); // Reemplazar '**3' con '**3' $expression = str_replace('Math.sqrt(', 'sqrt(', $expression); // Reemplazar 'Math.sqrt(' con 'sqrt(' $expression = str_replace('Math.exp(', 'exp(', $expression); // Reemplazar 'Math.exp(' con 'exp(' $expression = str_replace('Math.log10(', 'log10(', $expression); // Reemplazar 'Math.log10(' con 'log10(' // Evaluar la expresión y devolver el resultado return eval("return $expression;"); } catch (Throwable $e) { return 'Error'; // En caso de error, devolver un mensaje de error } } ?> <!-- Código JavaScript --> <script> // Función para agregar texto al campo de entrada function appendText(text) { const display = document.getElementById('display'); display.value += text; } // Función para calcular la potencia de un número function calculatePower(power) { const display = document.getElementById('display'); const currentValue = parseFloat(display.value); if (!isNaN(currentValue)) { display.value = currentValue ** power; } } // Función para borrar el contenido del campo de entrada function clearDisplay() { const display = document.getElementById('display'); display.value = ''; } <?php if (isset($result)) : ?> // Comprueba si la variable $result está definida // JavaScript para mostrar el resultado en el campo de entrada cuando se carga la página window.onload = function() { // Función que se ejecuta cuando la página se carga completamente const result = '<?= $result ?>'; //Obtiene el valor de $result y lo almacena en la variable JavaScript result if (result !== '') { //Comprueba si result no está vacío const display = document.getElementById('display'); //Obtiene el elemento de la página con el ID 'display display.value = result; //Establece el valor del campo de entrada (input) con el resultado obtenido } }; <?php endif; ?> </script>