WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
6124
pufffissal
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
27 May 2025
Sito web
10 July 2025
Esempio HTML della schermata di caricamento animata CSS
2 January 2025
Una strana home page
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Fancy Calculator</title> </head> <body> <div class="calculator"> <input type="text" id="display" disabled> <div class="row"> <button class="button" onclick="clearDisplay()">C</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> </div> <div class="row"> <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('+')">+</button> </div> <div class="row"> <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" onclick="appendToDisplay('-')">-</button> </div> <div class="row"> <button class="button" onclick="appendToDisplay('0')">0</button> <button class="button" onclick="appendToDisplay('.')">.</button> <button class="button" onclick="calculate()">=</button> <button class="button" onclick="appendToDisplay('*')">*</button> </div> <div class="row"> <button class="button" onclick="appendToDisplay('/')">/</button> </div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; background: linear-gradient(to bottom, #999, #666); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .calculator { background-color: #333; border-radius: 20px; padding: 30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); width: 300px; } input[type="text"] { width: 100%; height: 40px; font-size: 20px; text-align: right; border: none; background-color: #333; color: #fff; margin-bottom: 10px; } .row { display: flex; justify-content: space-between; } .button { width: 65px; height: 65px; font-size: 25px; text-align: center; border: none; border-radius: 50%; background-color: #333; color: #fff; cursor: pointer; transition: background-color 0.2s; } .button:hover { background-color: #666; }
JS
Copy
function appendToDisplay(value) { document.getElementById('display').value += value; } function clearDisplay() { document.getElementById('display').value = ''; } function calculate() { try { document.getElementById('display').value = eval(document.getElementById('display').value); } catch (error) { document.getElementById('display').value = 'Error'; } }
