Calcolatrice iOS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

1 February 2025

la nuova calcolatrice di mikey

17 July 2025

<!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

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

let display = document.getElementById('display');
let timeElement = document.getElementById('time');

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 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);
}

Calcolatrice iOS

Consigliato

la nuova calcolatrice di mikey

Calcolatrice scientifica

Calcolatrice Semplice

HTML

CSS

JS

Consigliato

la nuova calcolatrice di mikey

Calcolatrice scientifica

Calcolatrice Semplice

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS