以下是一个使用 HTML、CSS 和 JavaScript 实现的数学应用，用于计算**众数（Mode）**和**中位数（Median）**。该应用包含：
- 一个按钮生成随机数据集
- 箭头按钮来增加或减少数据集大小
- 一个按钮对数据集排序
- 按钮分别显示众数和中位数
---
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1
.0"/>
<title>Mode and Median Calcula
tor</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f4f6f9;
color: #333;
}
h1 {
text-align: center;
color: #2c3e50;
}
.container {
max-width: 800px;
margin: 0 au
to;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0
.1);
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bot
tom: 20px;
flex-wrap: wrap;
}
but
ton {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0
.3s;
}
but
ton:hover {
background-color: #2980b9;
}
.data-display {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
min-height: 50px;
word-break: break-all;
}
.size-control {
display: flex;
align-items: center;
gap: 10px;
}
.result {
margin-
top: 15px;
font-weight: bold;
color: #27ae60;
}
</style>
</head>
<body>
<div class="container">
<h1>Mode and Median Calcula
tor</h1>
<div class="controls">
<but
ton id="generate">Generate Random Data</but
ton>
<div class="size-control">
<but
ton id="decrease">←</but
ton>
<span id="size">Size: 10</span>
<but
ton id="increase">→</but
ton>
</div>
<but
ton id="sort">Sort Data</but
ton>
<but
ton id="showMode">Show Mode</but
ton>
<but
ton id="showMedian">Show Median</but
ton>
</div>
<h3>Data Set:</h3>
<div class="data-display" id="dataDisplay"></div>
<div class="result" id="result"></div>
</div>
<script>
// Variables
to s
tore dataset and size
let dataSize = 10;
let data = [];
// DOM Elements
const dataDisplay = document
.getElementById("dataDisplay");
const resultDiv = document
.getElementById("result");
const sizeSpan = document
.getElementById("size");
// Update data display
function updateDisplay() {
dataDisplay
.textContent = data
.join(", ");
resultDiv
.textContent = "";
}
// Generate random dataset
function generateRandomData() {
data = Array
.from({ length: dataSize }, () => Math
.floor(Math
.random() * 100));
updateDisplay();
}
// Sort the dataset
function sortData() {
if (data
.length === 0) return;
data
.sort((a, b) => a - b);
updateDisplay();
}
// Calculate mode
function calculateMode() {
if (data
.length === 0) return "No data";
const frequency = {};
let maxCount = 0;
let modes = [];
// Count frequencies
data
.forEach(num => {
frequency[num] = (frequency[num] || 0) + 1;
if (frequency[num] > maxCount) maxCount = frequency[num];
});
// Find all
numbers with maximum frequency
for (let num in frequency) {
if (frequency[num] === maxCount) {
modes
.push(
Number(num));
}
}
return modes
.length === Object
.keys(frequency)
.length ? "No mode" : modes
.join(", ");
}
// Calculate median
function calculateMedian() {
if (data
.length === 0) return "No data";
const sorted = [
...data]
.sort((a, b) => a - b);
const mid = Math
.floor(sorted
.length / 2);
if (sorted
.length % 2 === 0) {
return (sorted[mid - 1] + sorted[mid]) / 2;
} else {
return sorted[mid];
}
}
// Event Listeners
document
.getElementById("generate")
.addEventListener("click", generateRandomData);
document
.getElementById("increase")
.addEventListener("click", () => {
dataSize += 1;
sizeSpan
.textContent = `Size: ${dataSize}`;
generateRandomData();
});
document
.getElementById("decrease")
.addEventListener("click", () => {
if (dataSize > 1) {
dataSize -= 1;
sizeSpan
.textContent = `Size: ${dataSize}`;
generateRandomData();
}
});
document
.getElementById("sort")
.addEventListener("click", sortData);
document
.getElementById("showMode")
.addEventListener("click", () => {
const mode = calculateMode();
resultDiv
.textContent = `Mode: ${mode}`;
});
document
.getElementById("showMedian")
.addEventListener("click", () => {
const median = calculateMedian();
resultDiv
.textContent = `Median: ${median}`;
});
// Initialize on load
generateRandomData();
</script>
</body>
</html>
```
---
### 🔍 解释：
- **HTML 结构**：创建了按钮区、数据显示区和结果输出。
- **CSS 样式**：使界面美观、响应式，适合桌面和移动端。
- **JavaScript 功能**：
- `generateRandomData()`：生成指定长度的随机整数数组（范围 0–99）。
- `sortData()`：升序排序当前数据。
- `calculateMode()`：
- 使用对象统计频次；
- 找出最高频次的值；
- 如果所有值频率相同，则返回“无众数”；
- 否则返回众数（可能多个）。
- `calculateMedian()`：
- 排序后根据奇偶长度取中间值或中间两数平均值。
- **按钮控制**：
- ← 和 → 调整数据集大小并重新生成；
- “Show Mode” 和 “Show Median” 分别显示对应统计量。
---
### ✅ 特性说明：
- 支持多众数（如 `[1,1,2,2]` 的众数是 `1, 2`）
- 自动在改变大小时刷新数据
- 用户交互清晰，反馈及时
---
本文深入探讨了箭射气球问题的算法解决方案，通过分析一系列气球的位置，找到用最少箭矢击中所有气球的方法。文章详细介绍了如何使用排序和贪心算法策略，实现了高效解决问题的代码实现。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
