安排 👍
下面给你一个可直接在线使用的「随机数字 / 随机字符串生成工具」，纯前端（HTML + CSS + JavaScript），复制到本地或放到服务器就能用，也非常适合你以后改造成网站小工具。
✅ 功能说明
支持：
- 🎲 随机数字生成（可设置最小值 / 最大值 / 数量）
- 🔤 随机字符串生成
- 自定义长度
- 可选：数字 / 小写字母 / 大写字母 / 特殊字符
- 📋 一键复制结果
- 🌐 无需后端，完全在线
📄 完整示例代码（一个文件就够）
文件名示例：
random-generator.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>在线随机数字 / 字符串生成器</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: #f4f6f8;
padding: 40px;
}
.container {
max-width: 700px;
margin: auto;
background: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
h2 {
margin-top: 30px;
color: #333;
}
label {
display: block;
margin-top: 12px;
}
input[type="number"],
input[type="text"] {
width: 100%;
padding: 8px;
margin-top: 5px;
}
button {
margin-top: 15px;
padding: 10px 16px;
background: #007bff;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.result {
margin-top: 15px;
padding: 12px;
background: #f1f3f5;
border-radius: 6px;
white-space: pre-wrap;
}
.checkbox-group label {
display: inline-block;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>🎲 在线随机生成工具</h1>
<!-- 随机数字 -->
<h2>随机数字生成</h2>
<label>最小值</label>
<input type="number" id="min" value="1">
<label>最大值</label>
<input type="number" id="max" value="100">
<label>生成数量</label>
<input type="number" id="count" value="1">
<button onclick="generateNumbers()">生成随机数字</button>
<div class="result" id="numberResult"></div>
<!-- 随机字符串 -->
<h2>随机字符串生成</h2>
<label>字符串长度</label>
<input type="number" id="strLength" value="12">
<div class="checkbox-group">
<label><input type="checkbox" id="useNumbers" checked> 数字</label>
<label><input type="checkbox" id="useLower" checked> 小写字母</label>
<label><input type="checkbox" id="useUpper" checked> 大写字母</label>
<label><input type="checkbox" id="useSymbols"> 特殊字符</label>
</div>
<button onclick="generateString()">生成随机字符串</button>
<div class="result" id="stringResult"></div>
</div>
<script>
// 随机数字
function generateNumbers() {
const min = parseInt(document.getElementById('min').value);
const max = parseInt(document.getElementById('max').value);
const count = parseInt(document.getElementById('count').value);
if (min > max) {
alert("最小值不能大于最大值");
return;
}
let result = [];
for (let i = 0; i < count; i++) {
const num = Math.floor(Math.random() * (max - min + 1)) + min;
result.push(num);
}
document.getElementById('numberResult').innerText = result.join(", ");
}
// 随机字符串
function generateString() {
const length = parseInt(document.getElementById('strLength').value);
let chars = "";
if (document.getElementById('useNumbers').checked) chars += "0123456789";
if (document.getElementById('useLower').checked) chars += "abcdefghijklmnopqrstuvwxyz";
if (document.getElementById('useUpper').checked) chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (document.getElementById('useSymbols').checked) chars += "!@#$%^&*()_+-={}[]<>?";
if (!chars) {
alert("请至少选择一种字符类型");
return;
}
let result = "";
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
document.getElementById('stringResult').innerText = result;
}
</script>
</body>
</html>
🚀 使用方式
- 新建文件
random-generator.html - 粘贴上面全部代码
- 双击打开
✔ 本地可用 / ✔ 上传服务器即可在线使用