WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Calculatrice
2,040
robustarray63
Ouvrir dans l'éditeur
Publiez votre code
1
Recommandé
13 October 2023
Calculatrice simple
29 August 2024
Interface utilisateur de la calculatrice - Neumorphisme - blanc
17 July 2025
calculatrice scientifique
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) */
