二项式分布html实验
本文将带你一步步搭建一个纯前端的二项分布 Monte-Carlo 模拟器。
只要一个 HTML 文件，打开就能运行：
- 动态输入试验次数 n、成功概率 p 与重复次数 m
- 点击按钮立刻得到「模拟频数 vs 理论频数」柱状图
- 随着 m 增大，两组柱状图逐渐重合，从视觉上 印证二项分布公式
目录
- 为什么要做这个实验
- 技术选型
- 功能与界面预览
- 逐段解析核心代码
- 完整源码（复制即用）
- 如何使用 & 实验建议
- 可能的扩展方向
1. 为什么要做这个实验
学习概率论时，我们经常“纸上谈兵”——写下
[
P(X=k)=\binom{n}{k}p{k}(1-p){n-k}
]
就宣称“这就是答案”。
如果能亲手做实验，让抽样分布真实地落在眼前，
不仅能直观体会“大数定律”与“二项分布”的关系，也能加深对公式每一项含义的理解。
2. 技术选型
| 角色 | 工具 | 说明 |
|---|---|---|
| 样式 | Tailwind CSS（Play CDN） | 无需构建、开箱即用的原子化类 |
| 图表 | Chart.js v4 | 体积小、易上手、对柱状图支持好 |
| 逻辑 | 原生 JavaScript | 仅用 ES6 语法即可完成全部计算与交互 |
优势：
- 单文件、零依赖后端，复制到本地或放到 GitHub Pages 就能跑
- 代码总行数 < 200，便于教学与改造
3. 功能与界面预览
- 三个输入框：
- 试验次数
n：每个伯努利实验重复多少次 - 成功概率
p：0 ~ 1 - 重复实验次数
m：Monte-Carlo 总抽样次数
- 试验次数
- 「运行模拟」按钮
- 双数据集柱状图
- 蓝色 = 模拟得到的实际频数
- 绿色 = 理论 PMF×m 得到的期望频数
随着 m 增大，两种柱子高度越贴近 —— 这就是经验分布逼近理论分布的过程。
4. 逐段解析核心代码
4.1 组合数 comb(n,k)
function comb(n, k) {
k = Math.min(k, n - k); // 对称性优化
let c = 1;
for (let i = 0; i < k; i++) // 逐项相乘避免溢出
c = (c * (n - i)) / (i + 1);
return c;
}
思路：用递推而非阶乘，避免中间结果溢出并减少运算量。
4.2 理论 PMF binomPMF(n,p)
function binomPMF(n, p) {
const q = 1 - p;
return Array.from({ length: n + 1 }, (_, k) =>
comb(n, k) * Math.pow(p, k) * Math.pow(q, n - k)
);
}
返回长度 n+1 的数组，第 k 项即公式值。
4.3 Monte-Carlo 模拟 simulate(n,p,m)
function simulate(n, p, m) {
const freq = Array(n + 1).fill(0);
for (let i = 0; i < m; i++) {
let successes = 0;
for (let j = 0; j < n; j++)
if (Math.random() < p) successes++;
freq[successes]++;
}
return freq;
}
双层循环：外层做 m 次实验，内层做 n 次伯努利试验。
4.4 Chart.js 初始化与刷新
const chart = new Chart(ctx, {
type: "bar",
data: { labels: [], datasets: [...] },
options: { scales: { x: {...}, y: {...} } }
});
runBtn.onclick = () => {
const n = +nInput.value, p = +pInput.value, m = +mInput.value;
const sim = simulate(n,p,m);
const theory = binomPMF(n,p).map(x => x*m);
chart.data.labels = [...Array(n+1).keys()];
chart.data.datasets[0].data = sim;
chart.data.datasets[1].data = theory;
chart.update();
};
Chart.js 会自动在同一 X-轴按类别叠放两组柱子。
5. 完整源码（复制即用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>二项分布模拟实验</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body class="min-h-screen bg-slate-50 flex flex-col items-center py-8">
<h1 class="text-3xl font-bold mb-6">二项分布模拟实验</h1>
<div class="bg-white shadow-md rounded-lg p-6 w-full max-w-md mb-8">
<div class="mb-4">
<label class="block font-semibold mb-1" for="n">试验次数 n</label>
<input id="n" type="number" min="1" max="100" value="10" class="w-full border rounded px-3 py-2" />
</div>
<div class="mb-4">
<label class="block font-semibold mb-1" for="p">成功概率 p (0~1)</label>
<input id="p" type="number" step="0.01" min="0" max="1" value="0.5" class="w-full border rounded px-3 py-2" />
</div>
<div class="mb-4">
<label class="block font-semibold mb-1" for="m">重复实验次数 m</label>
<input id="m" type="number" min="1" max="20000" value="1000" class="w-full border rounded px-3 py-2" />
</div>
<button id="runBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded">
运行模拟
</button>
</div>
<div class="w-full max-w-3xl">
<canvas id="chart"></canvas>
</div>
<script>
const comb = (n, k) => {
if (k < 0 || k > n) return 0;
k = Math.min(k, n - k);
let c = 1;
for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1);
return c;
};
const binomPMF = (n, p) => {
const q = 1 - p;
return Array.from({ length: n + 1 }, (_, k) =>
comb(n, k) * Math.pow(p, k) * Math.pow(q, n - k)
);
};
const simulate = (n, p, m) => {
const freq = Array(n + 1).fill(0);
for (let i = 0; i < m; i++) {
let success = 0;
for (let j = 0; j < n; j++) success += Math.random() < p ? 1 : 0;
freq[success]++;
}
return freq;
};
const ctx = document.getElementById("chart");
const chart = new Chart(ctx, {
type: "bar",
data: {
labels: [],
datasets: [
{ label: "模拟频数", data: [], backgroundColor: "rgba(59,130,246,0.6)" },
{ label: "理论期望频数", data: [], backgroundColor: "rgba(16,185,129,0.6)" }
]
},
options: {
responsive: true,
scales: {
x: { title: { display: true, text: "成功次数 k" } },
y: { title: { display: true, text: "频数" } }
}
}
});
document.getElementById("runBtn").onclick = () => {
const n = +document.getElementById("n").value;
const p = +document.getElementById("p").value;
const m = +document.getElementById("m").value;
if (n <= 0 || p < 0 || p > 1 || m <= 0) {
alert("请输入合法参数！");
return;
}
const sim = simulate(n, p, m);
const theory = binomPMF(n, p).map(v => v * m);
chart.data.labels = [...Array(n + 1).keys()];
chart.data.datasets[0].data = sim;
chart.data.datasets[1].data = theory;
chart.update();
};
</script>
</body>
</html>
6. 如何使用 & 实验建议
- 下载/复制源文件 → 直接双击或用 VS Code Live Server 打开。
- 先用默认参数
n=10,p=0.5,m=1000运行一次。 - 增大 m（如 5000、10000）：观察柱状图差距逐渐减小。
- 改变 p（偏心硬币）：体验图形从对称到偏斜的变化。
- 改变 n：试验次数越大，横轴成功次数种类越多，曲线越接近正态分布形状。
小实验：设置
n=1，此时模拟结果就会精确落在伯努利分布 ( {0,1} ) 上，验证“二项分布在 n=1 时退化为伯努利”。
7. 可能的扩展方向
| 想法 | 技术提示 |
|---|---|
| 加入 泊松近似/正态近似 曲线 | 再添加一个折线数据集，公式计算期望值 |
计算并展示 卡方检验 χ² | 在 JS 中对两组频数做 Σ((obs-exp)²/exp) |
| 支持 动画增量抽样 | setInterval 每隔 N 次刷新一次柱状图 |
| 用 WebWorker 提升大规模模拟性能 | 把 simulate 放到 worker 线程 |
复制本文源码，亲眼见证经验分布向二项分布收敛的全过程吧！
![[AI Workflow] 基于多语种知识库的 Dify Workflow 构建与优化实践](https://i-blog.csdnimg.cn/direct/eac05b1a65434545bc7367a6633b4d20.png)
