3D打印螺丝规格速查表网页架构文档
3 分钟阅读
本文档整理了 3D 打印螺丝规格速查表网页的完整架构信息，包括数据结构、计算逻辑、核心函数等内容。
一、页面结构
┌─────────────────────────────────────────────────────────────┐
│ Header │
│ 标题：🔧 螺丝规格速查表 │
│ 副标题：常用公制与英制螺丝规格对照表 | 含3D打印优化尺寸 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Tab Navigation │
│ [规格查询] [公制螺丝] [英制螺丝] [规格对照表] [圈数计算] │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Tab Content │
│ 根据选中的标签显示对应内容 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Footer │
│ - 螺纹数据参考标准 │
│ - 维护者信息 │
└─────────────────────────────────────────────────────────────┘
在线访问：👉 3D打印螺纹速查表
二、功能模块
1. 规格查询
支持公制螺纹(M)和英制管螺纹(G)的详细规格查询：
- 公制螺纹：M3 ~ M64
- 英制管螺纹：G1/8 ~ G3
输出信息包括：
- 大径、螺距、攻丝底孔直径
- 螺纹牙型参数（H、h/8、h/4、实际牙高）
- 3D 打印优化尺寸（外牙大径、内牙大径）
2. 公制螺丝表格
显示公制螺纹基本尺寸表（GB/T 196）：
| 列名 | 说明 |
|---|---|
| 螺纹代号 | M3 ~ M30 |
| 大径 | 螺纹大径 |
| 螺距 P | 螺距 |
| H=0.866P | 等边三角形高度 |
| 尖端裁切 h/8 | 螺纹尖端裁切量 |
| 底部嵌入 h/4 | 底部嵌入螺柱量 |
| 实际牙高 | 实际牙型高度 |
| 3D外牙大径 | 3D打印外螺纹优化尺寸 |
| 3D内牙大径 | 3D打印内螺纹优化尺寸 |
3. 英制螺丝表格
显示英制螺纹和英制管螺纹基本尺寸表：
- 英制螺纹：#2-56 ~ 1/2”-13
- 英制管螺纹：G1/8 ~ G1½（GB/T 7307）
4. 规格对照表
常用英制规格与公制规格对照，标注兼容性：
| 英制规格 | 最接近公制 | 兼容性 |
|---|---|---|
| 1/4”-20 | M6×1.0 | 紧急替代 |
| #10-24 | M5×0.8 | 不可互换 |
5. 圈数计算
计算 3D 打印螺纹圈数与角度：
输入：
- 螺纹类型（公制/英制）
- 螺纹规格
- 螺丝高度(长度)
输出：
- 所需圈数
- 总旋转角度
- 完整圈数
- 余数角度
三、数据结构
1. 公制螺纹数据 (metricThreadData)
{
'M6': {
major: 6.000, // 大径
pitch: 1.0, // 螺距
tapDrill: 5.0, // 攻丝底孔直径
nutThickness: 4.8, // 螺母厚度参考
male3DPrint: 5.95, // 3D打印外牙大径
female3DPrint: 6.05 // 3D打印内牙大径
}
}
支持规格：M3, M4, M5, M6, M8, M10, M12, M14, M16, M18, M20, M22, M24, M27, M30, M36, M42, M48, M56, M64
2. 英制管螺纹数据 (imperialThreadData)
{
'G1/2': {
od: 20.955, // 管外径
tpi: 14, // 每英寸牙数
pitch: 1.814, // 螺距
major: 20.955, // 大径
pitchDiameter: 19.793,// 中径
minor: 18.631 // 小径
}
}
支持规格：G1/8, G1/4, G3/8, G1/2, G3/4, G1, G1¼, G1½, G2, G2½, G3
3. 圈数计算数据
// 公制螺纹螺距数据
const calcMetricPitchData = {
'M10': { pitch: 1.5, name: 'M10×1.5' }
};
// 英制管螺纹螺距数据
const calcImperialPitchData = {
'G1/2': { pitch: 1.814, name: 'G1/2', tpi: 14 }
};
四、计算公式
1. 螺纹牙型参数
H = 0.866 × P // 等边三角形高度
尖端裁切 = H / 8 // 螺纹尖端裁切量
底部嵌入 = H / 4 // 底部嵌入螺柱量
实际牙高 = H - H/8 - H/4 // 实际牙型高度
小径 = 大径 - 2 × 实际牙高
2. 圈数与角度计算
圈数 = 高度 ÷ 螺距
总角度 = 圈数 × 360°
完整圈数 = floor(圈数)
余数角度 = (圈数 - 完整圈数) × 360°
五、核心函数
| 函数名 | 功能 |
|---|---|
switchTab(tabName) |
切换标签页 |
calculateThread() |
查询螺纹规格详情 |
calculateThreads() |
计算圈数与角度 |
toggleCalcThreadInput() |
切换螺纹类型输入 |
updateCalcThreadInfo() |
更新螺纹信息显示 |
六、UI 组件
1. 标签页导航
<div class="tabs">
<button class="tab active">规格查询</button>
<button class="tab">公制螺丝</button>
<button class="tab">英制螺丝</button>
<button class="tab">规格对照表</button>
<button class="tab">圈数计算</button>
</div>
2. 输入组件
- 下拉选择框：螺纹类型、螺纹规格
- 数字输入框：螺丝高度(长度)
- 查询按钮：触发计算
3. 结果展示
- 结果框：绿色背景，显示计算结果
- 信息框：蓝色背景，显示提示信息
- 公式框：橙色背景，显示计算公式
七、CSS 样式模块
| 模块 | 说明 |
|---|---|
.container |
主容器，白色圆角卡片 |
.tabs |
标签页导航 |
.tab |
标签按钮 |
.calculator-section |
计算器区域 |
.calculator-grid |
输入项网格布局 |
.result-box |
结果展示框 |
.info-box |
信息提示框 |
.formula-box |
公式展示框 |
.reference-table |
参考表格 |
八、响应式设计
| 断点 | 调整内容 |
|---|---|
| ≤768px | 标题缩小、标签页换行、输入框缩小 |
| ≤480px | 进一步缩小标题和标签 |
九、执行标准
- 公制螺纹：GB/T 196-2003
- 英制管螺纹：GB/T 7307-2001
十、文件位置
f:\Files\GitHub Files\techysy.github.io\3d-print-threads.html
访问地址：https://techysy.github.io/3d-print-threads.html
十一、使用场景
- 3D 打印螺纹设计：查询螺纹规格，获取 3D 打印优化尺寸
- 攻丝底孔计算：获取攻丝底孔直径参考
- 螺纹建模：获取牙型参数，用于 CAD 建模
- 圈数计算：计算螺纹旋入圈数和角度，用于 3D 打印切片设置
