Hotodogo | Snippets: 硬盘实际容量计算器

CSS Before Head

HTML Head

body { 
            font-family: Arial, sans-serif; 
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            background: #f0f0f0;
        }
        .container { 
            background: #fff;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            max-width: 600px;
            margin: 0 auto;
        }
        .input-group { 
            margin: 15px 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        input[type="number"] { 
            width: calc(100% - 2px);
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            box-sizing: border-box;
            margin: 0 2px;
        }
        select {
            width: calc(100% - 2px);
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            background: white;
            box-sizing: border-box;
            margin: 0 2px;
        }
        button { 
            width: 100%;
            background: #007bff;
            color: white;
            border: none;
            padding: 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
            transition: background 0.3s;
        }
        button:hover { background: #0056b3; }
        .result { 
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            text-align: center;
        }
        .error {
            color: #dc3545;
            margin-top: 10px;
            text-align: center;
            font-size: 14px;
        }

        @media (min-width: 480px) {
            .input-group {
                flex-direction: row;
                align-items: center;
            }
            input[type="number"] {
                width: 70%;
            }
            select {
                width: 30%;
            }
            button {
                width: auto;
                padding: 12px 24px;
                display: block;
                margin: 15px auto 0;
            }
        }

CSS After Head

JS Before HTML Body

<div class="container">
        <h2 style="margin: 0 0 20px; text-align: center; color: #333;">硬盘实际容量计算器</h2>
        <div class="input-group">
            <input type="number" id="capacityValue" step="0.1" placeholder="输入标称容量数值" min="0.1" value="1">
            <select id="unitSelect">
                <option value="B">B</option>
                <option value="KB">KB</option>
                <option value="MB">MB</option>
                <option value="GB">GB</option>
                <option value="TB" selected>TB</option>
            </select>
        </div>
        <button onclick="calculate()">计算实际容量</button>
        <div id="result" class="result"></div>
        <div id="error" class="error"></div>
    </div>

HTML Body

HTML Foot

function calculate() {
            const errorElem = document.getElementById('error');
            const resultElem = document.getElementById('result');
            errorElem.textContent = '';
            resultElem.textContent = '';

            try {
                const value = parseFloat(document.getElementById('capacityValue').value);
                const unit = document.getElementById('unitSelect').value;

                if (isNaN(value) || value <= 0) {
                    throw new Error("容量必须为大于0的数字");
                }

                const decimalUnits = {
                    'B': 1,
                    'KB': 10**3,
                    'MB': 10**6,
                    'GB': 10**9,
                    'TB': 10**12
                };
                const bytesTotal = value * decimalUnits[unit];

                const binaryUnits = [
                    ['TB', 1024**4],
                    ['GB', 1024**3],
                    ['MB', 1024**2],
                    ['KB', 1024],
                    ['B', 1]
                ];

                let finalValue = 0;
                let finalUnit = 'B';
                for (const [unit, size] of binaryUnits) {
                    const currentValue = bytesTotal / size;
                    if (currentValue >= 1 || unit === 'B') {
                        finalValue = currentValue;
                        finalUnit = unit;
                        break;
                    }
                }

                finalValue = Math.round(finalValue * 10) / 10;
                resultElem.textContent = `实际容量: ${finalValue.toFixed(1)}${finalUnit}`;
            } catch (e) {
                errorElem.textContent = `错误: ${e.message}`;
            }
        }

JS After HTML Body