以下是一个使用 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`）
- 自动在改变大小时刷新数据
- 用户交互清晰，反馈及时
---
该博客讨论了一种算法问题，涉及找到一组不重叠的区间中的最小箭头数量。通过将区间按结束时间排序并迭代，可以确定每个新区间是否与前一个区间重叠。如果新区间不与前一个重叠，则需要额外的箭头，更新计数并记录新的结束时间。解题过程中注意避免对最后一个区间进行不必要的特殊处理。
扫一扫
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
