WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculadora
1270
robustarray63
Abrir en el editor
Publica tu código
Recomendado
17 July 2025
Calculadora científica
29 July 2024
Calculadora de iPhone
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scientific Calculator</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calculator" id="calculator"> <div class="header"> <div class="time" id="time">12:45</div> </div> <div class="display" id="display">0</div> <div class="buttons"> <button class="button operator" onclick="clearDisplay()">C</button> <button class="button operator" onclick="appendToDisplay('(')">(</button> <button class="button operator" onclick="appendToDisplay(')')">)</button> <button class="button operator" onclick="appendToDisplay('%')">%</button> <button class="button operator" onclick="appendToDisplay('/')">/</button> <button class="button operator" onclick="appendToDisplay('*')">*</button> <button class="button operator" onclick="appendToDisplay('-')">-</button> <button class="button operator" onclick="appendToDisplay('+')">+</button> <button class="button" onclick="appendToDisplay('Math.sqrt(')">√</button> <button class="button" onclick="appendToDisplay('Math.pow(')">x²</button> <button class="button" onclick="appendToDisplay('Math.abs(')">|x|</button> <button class="button" onclick="appendToDisplay('Math.log(')">log</button> <button class="button" onclick="appendToDisplay('Math.sin(')">sin</button> <button class="button" onclick="appendToDisplay('Math.cos(')">cos</button> <button class="button" onclick="appendToDisplay('Math.tan(')">tan</button> <button class="button" onclick="appendToDisplay('Math.exp(')">e^x</button> <button class="button" onclick="appendToDisplay('7')">7</button> <button class="button" onclick="appendToDisplay('8')">8</button> <button class="button" onclick="appendToDisplay('9')">9</button> <button class="button" onclick="appendToDisplay('4')">4</button> <button class="button" onclick="appendToDisplay('5')">5</button> <button class="button" onclick="appendToDisplay('6')">6</button> <button class="button" onclick="appendToDisplay('1')">1</button> <button class="button" onclick="appendToDisplay('2')">2</button> <button class="button" onclick="appendToDisplay('3')">3</button> <button class="button zero" onclick="appendToDisplay('0')">0</button> <button class="button equal" onclick="calculate()">=</button> </div> <div class="info">Swipe to rotate!</div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #1c1c1c, #333); font-family: 'Arial', sans-serif; margin: 0; } .calculator { background: #282828; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 400px; padding: 20px; display: flex; flex-direction: column; } .header { display: flex; justify-content: space-between; align-items: center; color: #ffffff; font-size: 1.2em; padding: 10px 0; } .display { background: #1e1e1e; border-radius: 10px; padding: 20px; font-size: 2.5em; text-align: right; height: 60px; line-height: 60px; color: #ffffff; overflow: hidden; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 20px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .button { padding: 20px; font-size: 1.5em; border: none; background: #3a3a3a; border-radius: 10px; color: #ffffff; cursor: pointer; transition: background 0.3s, transform 0.2s; } .button:hover { background: #4a4a4a; transform: scale(1.05); } .operator { background: #f39c12; } .operator:hover { background: #e67e22; } .equal { background: #2ecc71; grid-column: span 4; } .equal:hover { background: #27ae60; } .zero { grid-column: span 2; } .info { font-size: 0.8em; color: #ffffff; text-align: center; margin-top: 10px; }
JS
Copy
let timeElement = document.getElementById('time'); function updateTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); timeElement.innerText = `${hours}:${minutes}`; } setInterval(updateTime, 1000); updateTime(); function appendToDisplay(value) { if (display.innerText === '0' || display.innerText === 'Error') { display.innerText = ''; } display.innerText += value; playSound(); } function clearDisplay() { display.innerText = '0'; playSound(); } function calculate() { try { let result = eval(display.innerText.replace(/Math\.sqrt\((.*?)\)/g, 'Math.sqrt($1)') .replace(/Math\.pow\((.*?)\)/g, 'Math.pow($1)') .replace(/Math\.abs\((.*?)\)/g, 'Math.abs($1)')); display.innerText = result; playSound(); } catch { display.innerText = 'Error'; } } function playSound() { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(440, audioContext.currentTime); oscillator.connect(audioContext.destination); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.1); } t needed) */
