示例成品 · 平台演示，按左边这组点选真跑出来的
直接保存成 `单位换算器.html`，浏览器打开就能用。默认长度，点标签切重量/体积。输入任一数值，其他单位自动换算，保留 2 位小数。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨境单位换算器</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
background: #f2f4f8;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.card {
background: #ffffff;
width: 100%;
max-width: 520px;
border-radius: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
padding: 24px;
}
h1 {
font-size: 22px;
margin-bottom: 4px;
}
.sub {
color: #666;
font-size: 13px;
margin-bottom: 18px;
}
.tabs {
display: flex;
gap: 8px;
margin-bottom: 18px;
}
.tabs button {
flex: 1;
padding: 10px 0;
border: 1px solid #e0e4ea;
background: #f8fafc;
border-radius: 10px;
font-size: 15px;
cursor: pointer;
color: #333;
}
.tabs button.active {
background: #1f6feb;
color: #fff;
border-color: #1f6feb;
}
.row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 0;
border-bottom: 1px solid #f0f2f5;
}
.row label {
font-size: 14px;
color: #333;
}
.row input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #d9dee7;
border-radius: 8px;
outline: none;
}
.row input:focus {
border-color: #1f6feb;
box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}
#copyBtn {
margin-top: 16px;
width: 100%;
padding: 12px;
border: none;
background: #1f6feb;
color: #fff;
font-size: 15px;
border-radius: 10px;
cursor: pointer;
}
#copyBtn:active {
background: #185abc;
}
#copyTip {
height: 18px;
font-size: 13px;
color: #1f6feb;
margin-top: 6px;
text-align: center;
}
.note {
margin-top: 14px;
font-size: 12px;
color: #888;
line-height: 1.6;
}
</style>
</head>
<body>
<main class="card">
<h1>单位换算器</h1>
<p class="sub">长度 / 重量 / 体积 · 保留 2 位小数</p>
<div class="tabs">
<button class="active" data-cat="length" type="button">长度</button>
<button data-cat="weight" type="button">重量</button>
<button data-cat="volume" type="button">体积</button>
</div>
<div id="converter"></div>
<button id="copyBtn" type="button">复制当前结果</button>
<p id="copyTip"></p>
<p class="note">
写死换算率：1 in = 2.54 cm；1 lb = 453.59237 g；1 oz = 28.349523125 g；1 fl oz(美制) = 29.5735295625 mL。
</p>
</main>
<script>
const categories = {
length: {
base: 'cm',
units: [
{ key: 'cm', label: '厘米(cm)', toBase: v => v, fromBase: v => v },
{ key: 'in', label: '英寸(in)', toBase: v => v * 2.54, fromBase: v => v / 2.54 },
{ key: 'mm', label: '毫米(mm)', toBase: v => v / 10, fromBase: v => v * 10 }
]
},
weight: {
base: 'g',
units: [
{ key: 'kg', label: '千克(kg)', toBase: v => v * 1000, fromBase: v => v / 1000 },
{ key: 'g', label: '克(g)', toBase: v => v, fromBase: v => v },
{ key: 'lb', label: '磅(lb)', toBase: v => v * 453.59237, fromBase: v => v / 453.59237 },
{ key: 'oz', label: '盎司(oz)', toBase: v => v * 28.349523125, fromBase: v => v / 28.349523125
点左边「开工 · 直接出成品」，出一份你自己的版本（文字免费）