WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculatrice
1046
robustarray63
Ouvrir dans l'éditeur
Publiez votre code
16 September 2024
Calculatrice d'amour
29 July 2024
Calculatrice 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) */
