随机数生成器

工具 admin · 2026-08-29 · 使用 3
生成指定范围内的随机整数，支持历史记录和复制功能
随机数生成器
放大后操作
纯前端工具，无后端代码
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>随机数生成器</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  .container {
    background: rgba(255,255,255,0.95);
    border-radius: 24px;
    padding: 30px 25px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    text-align: center;
  }
  h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .range-group {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
  }
  .range-item {
    flex: 1;
    text-align: left;
  }
  .range-item label {
    font-size: 14px;
    color: #555;
    display: block;
    margin-bottom: 6px;
  }
  .range-item input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 12px;
    font-size: 18px;
    text-align: center;
    outline: none;
    transition: border-color 0.3s;
    background: #f9f9f9;
  }
  .range-item input:focus {
    border-color: #764ba2;
    background: #fff;
  }
  .result-box {
    background: #f0f0f0;
    border-radius: 16px;
    padding: 30px 20px;
    margin: 20px 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px dashed #ccc;
  }
  .result-number {
    font-size: 56px;
    font-weight: 800;
    color: #764ba2;
    line-height: 1.2;
    word-break: break-all;
  }
  .result-placeholder {
    color: #aaa;
    font-size: 18px;
  }
  .btn-group {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
  .btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .btn:active {
    transform: scale(0.96);
  }
  .btn-primary {
    background: #764ba2;
    color: #fff;
    box-shadow: 0 4px 10px rgba(118,75,162,0.4);
  }
  .btn-secondary {
    background: #eee;
    color: #555;
  }
  .btn-copy {
    background: #4caf50;
    color: #fff;
    box-shadow: 0 4px 10px rgba(76,175,80,0.3);
  }
  .history-section {
    margin-top: 10px;
    text-align: left;
  }
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .history-header h3 {
    font-size: 16px;
    color: #333;
  }
  .clear-btn {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
  }
  .history-list {
    max-height: 150px;
    overflow-y: auto;
    background: #fafafa;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #eee;
  }
  .history-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 14px;
    color: #444;
  }
  .history-item:nth-child(odd) {
    background: #f0f0f0;
  }
  .history-item span:first-child {
    color: #999;
  }
  .history-item span:last-child {
    font-weight: 600;
    color: #764ba2;
  }
  .toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 100;
  }
  .toast.show {
    opacity: 1;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>🎲 随机数生成器</h1>
    <div class="range-group">
      <div class="range-item">
        <label>最小值</label>
        <input type="number" id="minInput" value="1">
      </div>
      <div class="range-item">
        <label>最大值</label>
        <input type="number" id="maxInput" value="100">
      </div>
    </div>
    <div class="result-box" id="resultBox">
      <div class="result-placeholder" id="placeholder">点击生成</div>
      <div class="result-number" id="resultNumber" style="display:none;"></div>
    </div>
    <div class="btn-group">
      <button class="btn btn-primary" id="generateBtn">生成</button>
      <button class="btn btn-copy" id="copyBtn">复制</button>
    </div>
    <div class="history-section">
      <div class="history-header">
        <h3>📜 历史记录</h3>
        <button class="clear-btn" id="clearBtn">清空</button>
      </div>
      <div class="history-list" id="historyList">
        <div style="color:#aaa; text-align:center; padding:10px; font-size:14px;">暂无记录</div>
      </div>
    </div>
  </div>
  <div class="toast" id="toast"></div>

<script>
  (function() {
    const minInput = document.getElementById('minInput');
    const maxInput = document.getElementById('maxInput');
    const resultNumber = document.getElementById('resultNumber');
    const placeholder = document.getElementById('placeholder');
    const generateBtn = document.getElementById('generateBtn');
    const copyBtn = document.getElementById('copyBtn');
    const clearBtn = document.getElementById('clearBtn');
    const historyList = document.getElementById('historyList');
    const toast = document.getElementById('toast');

    let history = [];

    // 初始化历史记录
    try {
      const saved = localStorage.getItem('randomHistory');
      if (saved) history = JSON.parse(saved);
    } catch(e) {}
    renderHistory();

    function generateRandom() {
      let min = parseInt(minInput.value, 10);
      let max = parseInt(maxInput.value, 10);

      // 处理无效输入
      if (isNaN(min)) min = 1;
      if (isNaN(max)) max = 100;
      if (min > max) {
        const temp = min;
        min = max;
        max = temp;
        minInput.value = min;
        maxInput.value = max;
      }

      const range = max - min + 1;
      const random = Math.floor(Math.random() * range) + min;

      // 显示结果
      resultNumber.textContent = random;
      resultNumber.style.display = 'block';
      placeholder.style.display = 'none';

      // 添加到历史
      const now = new Date();
      const timeStr = now.getHours().toString().padStart(2,'0') + ':' + now.getMinutes().toString().padStart(2,'0') + ':' + now.getSeconds().toString().padStart(2,'0');
      history.unshift({ value: random, time: timeStr });
      if (history.length > 20) history.pop();
      localStorage.setItem('randomHistory', JSON.stringify(history));
      renderHistory();

      return random;
    }

    function renderHistory() {
      if (history.length === 0) {
        historyList.innerHTML = '<div style="color:#aaa; text-align:center; padding:10px; font-size:14px;">暂无记录</div>';
        return;
      }
      historyList.innerHTML = history.map((item, index) => `
        <div class="history-item">
          <span>${item.time}</span>
          <span>${item.value}</span>
        </div>
      `).join('');
    }

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 1500);
    }

    // 事件绑定
    generateBtn.addEventListener('click', generateRandom);

    copyBtn.addEventListener('click', function() {
      const val = resultNumber.textContent;
      if (!val) {
        showToast('请先生成一个数字');
        return;
      }
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(val).then(() => {
          showToast('已复制 ' + val);
        }).catch(() => {
          // 降级方案
          fallbackCopy(val);
        });
      } else {
        fallbackCopy(val);
      }
    });

    function fallbackCopy(text) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      try {
        document.execCommand('copy');
        showToast('已复制 ' + text);
      } catch(e) {
        showToast('复制失败，请手动复制');
      }
      document.body.removeChild(textarea);
    }

    clearBtn.addEventListener('click', function() {
      history = [];
      localStorage.removeItem('randomHistory');
      renderHistory();
      showToast('历史已清空');
    });

    // 键盘支持
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        generateRandom();
      }
      if (e.key === 'c' || e.key === 'C') {
        copyBtn.click();
      }
    });

    // 初始生成一个数字
    generateRandom();
  })();
</script>
</body>
</html>
暂无评论，来说两句吧
随机数生成器

评论（0）
