🎲 智能随机数生成器

最小值：
最大值：
生成历史 (最近10条)

HTML代码如下，可在本地部署（windows），先使用记事本打开，然后将后缀名改为HTML格式即可
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能随机数生成器</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --error-color: #e74c3c;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .container {
            background: rgba(255, 255, 255, 0.95);
            padding: 2.5rem;
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 500px;
            backdrop-filter: blur(10px);
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 2rem;
            font-weight: 600;
        }

        .input-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
            font-weight: 500;
        }

        input {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid #ddd;
            border-radius: 0.5rem;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        input:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        button {
            width: 100%;
            padding: 1rem;
            background: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 0.5rem;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, background 0.3s;
        }

        button:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        #result {
            margin-top: 2rem;
            text-align: center;
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-color);
            min-height: 2.5rem;
        }

        .error {
            color: var(--error-color);
            text-align: center;
            margin-top: 1rem;
            font-weight: 500;
            display: none;
        }

        .history {
            margin-top: 2rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 0.5rem;
            max-height: 200px;
            overflow-y: auto;
        }

        .history h3 {
            margin: 0 0 1rem 0;
            color: var(--primary-color);
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem;
            background: white;
            margin-bottom: 0.5rem;
            border-radius: 0.3rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎲 智能随机数生成器</h1>
        
        <div class="input-group">
            <label for="min">最小值：</label>
            <input type="number" id="min" placeholder="例如：-100" autocomplete="off">
        </div>

        <div class="input-group">
            <label for="max">最大值：</label>
            <input type="number" id="max" placeholder="例如：500" autocomplete="off">
        </div>

        <button onclick="generateRandom()">生成随机数</button>

        <div id="result"></div>
        <div id="error" class="error"></div>

        <div class="history">
            <h3>生成历史 (最近10条)</h3>
            <div id="historyList"></div>
        </div>
    </div>

    <script>
        let history = [];

        function generateRandom() {
            const minInput = document.getElementById('min');
            const maxInput = document.getElementById('max');
            const resultDiv = document.getElementById('result');
            const errorDiv = document.getElementById('error');
            
            const min = parseInt(minInput.value);
            const max = parseInt(maxInput.value);

            // 重置状态
            errorDiv.style.display = 'none';
            resultDiv.textContent = '';
            minInput.style.borderColor = '#ddd';
            maxInput.style.borderColor = '#ddd';

            // 验证逻辑
            if (isNaN(min) || isNaN(max)) {
                showError('请输入有效的数字范围');
                isNaN(min) ? minInput.style.borderColor = '#e74c3c' 
                           : maxInput.style.borderColor = '#e74c3c';
                return;
            }

            if (min >= max) {
                showError('最大值必须大于最小值');
                maxInput.style.borderColor = '#e74c3c';
                return;
            }

            // 生成随机数（包含边界）
            const random = Math.floor(Math.random() * (max - min + 1)) + min;
            
            // 显示结果
            resultDiv.innerHTML = `🎉 随机数：<span style="color: ${getRandomColor()}">${random}</span>`;
            
            // 记录历史
            addToHistory(random, min, max);
        }

        function showError(message) {
            const errorDiv = document.getElementById('error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        }

        function getRandomColor() {
            const colors = ['#e74c3c', '#3498db', '#2ecc71', '#9b59b6', '#f1c40f'];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        function addToHistory(number, min, max) {
            history.unshift({
                number,
                range: `[${min}, ${max}]`,
                timestamp: new Date().toLocaleTimeString()
            });
            
            // 保持最多10条记录
            if (history.length > 10) history.pop();

            // 更新历史显示
            const historyList = document.getElementById('historyList');
            historyList.innerHTML = history.map(item => `
                <div class="history-item">
                    <span>${item.number}</span>
                    <span style="color: #7f8c8d">${item.range}</span>
                    <span style="color: #95a5a6">${item.timestamp}</span>
                </div>
            `).join('');
        }
    </script>
</body>
</html>