单位换算器怎么写

直接保存成 单位换算器.html，浏览器打开就能用。默认长度，点标签切重量/体积。输入任一数值，其他单位自动换算，保留 2 位小数。

<!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>

    

      
      
      
    

    

    
    <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