工作需要吧,也是被逼,实属不是很方便，经常用到，就做了一个我自己所在行业产品重量计算器.包含英寸转换.对角线.密度等.这里分享给大家.希望对你有用.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>产品重量计算器</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="favicon.ico">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,"Microsoft YaHei","PingFang SC",sans-serif;background:#f0f2f5;min-height:100vh;-webkit-tap-highlight-color:transparent}
.wrap{max-width:480px;margin:0 auto;padding:20px 16px 40px}
.card{background:#fff;border-radius:16px;box-shadow:0 2px 16px rgba(0,0,0,.06);padding:24px 20px 20px;margin-bottom:16px}
h1{font-size:18px;font-weight:800;color:#1a1a2e;text-align:center;margin-bottom:20px}
/* tabs */
.tabs{display:flex;gap:0;margin-bottom:20px;background:#f2f3f5;border-radius:10px;padding:3px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;min-width:0;text-align:center;padding:10px 4px;border-radius:8px;font-size:13px;font-weight:700;color:#888;cursor:pointer;transition:all .15s;white-space:nowrap}
.tab.on{background:#4361ee;color:#fff;box-shadow:0 2px 8px rgba(67,97,238,.2)}
/* form */
.lbl{font-size:11px;font-weight:700;color:#aaa;letter-spacing:.6px;margin-bottom:6px;text-transform:uppercase}
select.mat{width:100%;padding:11px 12px;border:1.5px solid #e0e2e6;border-radius:10px;font-size:14px;color:#333;background:#fafbfc;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer;outline:none;margin-bottom:14px}
select.mat:focus{border-color:#4361ee}
.fields{display:flex;flex-direction:column;gap:12px}
.fld label{display:block;font-size:12px;font-weight:600;color:#555;margin-bottom:5px}
.fld label span{color:#bbb;font-weight:400}
.fld input{width:100%;padding:11px 12px;border:1.5px solid #e0e2e6;border-radius:10px;font-size:15px;color:#333;outline:none;transition:border .15s;-webkit-appearance:none}
.fld input:focus{border-color:#4361ee}
.fld input::placeholder{color:#c5c7cc}
.btn{width:100%;padding:13px;background:#4361ee;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:18px;transition:background .15s}
.btn:active{background:#3451d0}
/* result */
.res{margin-top:16px;padding:18px 14px;background:linear-gradient(135deg,#eef1ff,#f5eeff);border-radius:12px;text-align:center}
.res .rl{font-size:12px;color:#888;margin-bottom:3px}
.res .rv{font-size:30px;font-weight:800;color:#4361ee}
.res .ru{font-size:14px;color:#999;font-weight:600}
.res.hide{display:none}
/* price */
.prc{display:flex;gap:10px;margin-top:12px}
.prc .pb{flex:1;background:#fffbe6;border:1.5px solid #f0e6b8;border-radius:10px;padding:12px 8px;text-align:center}
.prc .pb label{display:block;font-size:11px;font-weight:600;color:#998800;margin-bottom:5px}
.prc .pb input{width:100%;padding:7px;border:none;border-radius:7px;font-size:17px;font-weight:700;color:#b8860b;text-align:center;outline:none;background:transparent}
.prc .pb input::placeholder{color:#ddd}
.prc .pt{flex:1;background:linear-gradient(135deg,#fff5e6,#fff0d6);border:1.5px solid #f0d8a8;border-radius:10px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.prc .pt .pl{font-size:11px;color:#998800;margin-bottom:2px}
.prc .pt .pv{font-size:20px;font-weight:800;color:#b8860b}
.prc .pt .pu{font-size:11px;color:#c9a84c;font-weight:600}
.rst{width:100%;padding:11px;background:transparent;color:#bbb;border:1.5px solid #e8e8e8;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;margin-top:10px}
.rst:active{border-color:#ccc;color:#777}
/* ref tabs */
.ref-title{font-size:14px;font-weight:700;color:#333;margin-bottom:12px;text-align:center}
.ref-img{width:100%;border-radius:8px;display:block}
/* hide */
.hide{display:none!important}
@media(max-width:380px){.tab{font-size:12px;padding:9px 2px}}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<h1>润辉产品重量计算器</h1>
<div class="tabs" id="tabs">
<div class="tab on" data-p="round" onclick="pick('round')">圆形</div>
<div class="tab" data-p="square" onclick="pick('square')">方形</div>
<div class="tab" data-p="diag" onclick="pick('diag')">对角线</div>
<div class="tab" data-p="inch" onclick="pick('inch')">英寸</div>
<div class="tab" data-p="tol" onclick="pick('tol')">公差</div>
<div class="tab" data-p="rough" onclick="pick('rough')">粗糙度</div>
</div>
<div id="pRound">
<div class="lbl">材料类型</div>
<select class="mat" id="matRound" onchange="liveWeight()"></select>
<div class="fields">
<div class="fld"><label>外径 (mm)</label><input type="number" id="od" placeholder="如 690" step="any" oninput="liveWeight()"></div>
<div class="fld"><label>内径 (mm) <span>— 实心填0或留空</span></label><input type="number" id="id_" placeholder="内径（可选）" step="any" oninput="liveWeight()"></div>
<div class="fld"><label>厚度 (mm)</label><input type="number" id="tkr" placeholder="如 260" step="any" oninput="liveWeight()"></div>
</div>
<button class="btn" onclick="calcWeight()">计算重量</button>
<div class="res hide" id="resRound"><div class="rl">重量</div><div><span class="rv" id="rvR">—</span> <span class="ru">kg</span></div></div>
<div class="prc" id="priceR">
<div class="pb"><label>单价 (元/kg)</label><input type="number" id="upR" placeholder="输入单价" step="any" oninput="livePrice('round')"></div>
<div class="pt"><div class="pl">总价 (元/件)</div><div><span class="pv" id="tpR">—</span> <span class="pu">元</span></div></div>
</div>
<button class="rst" onclick="resetW('round')">清空重置</button>
</div>
<div id="pSquare" class="hide">
<div class="lbl">材料类型</div>
<select class="mat" id="matSquare" onchange="liveWeight()"></select>
<div class="fields">
<div class="fld"><label>长度 (mm)</label><input type="number" id="ln" placeholder="如 307" step="any" oninput="liveWeight()"></div>
<div class="fld"><label>宽度 (mm)</label><input type="number" id="wd" placeholder="如 223" step="any" oninput="liveWeight()"></div>
<div class="fld"><label>厚度 (mm)</label><input type="number" id="tks" placeholder="如 19" step="any" oninput="liveWeight()"></div>
</div>
<button class="btn" onclick="calcWeight()">计算重量</button>
<div class="res hide" id="resSquare"><div class="rl">重量</div><div><span class="rv" id="rvS">—</span> <span class="ru">kg</span></div></div>
<div class="prc" id="priceS">
<div class="pb"><label>单价 (元/kg)</label><input type="number" id="upS" placeholder="输入单价" step="any" oninput="livePrice('square')"></div>
<div class="pt"><div class="pl">总价 (元/件)</div><div><span class="pv" id="tpS">—</span> <span class="pu">元</span></div></div>
</div>
<button class="rst" onclick="resetW('square')">清空重置</button>
</div>
<div id="pDiag" class="hide">
<div class="fields">
<div class="fld"><label>长度 (mm)</label><input type="number" id="dg_l" placeholder="输入长度" step="any" oninput="liveDiag()"></div>
<div class="fld"><label>宽度 (mm)</label><input type="number" id="dg_w" placeholder="输入宽度" step="any" oninput="liveDiag()"></div>
</div>
<button class="btn" onclick="calcDiag()">计算对角线</button>
<div class="res hide" id="resDiag"><div class="rl">对角线</div><div><span class="rv" id="dv">—</span> <span class="ru">mm</span></div></div>
<button class="rst" onclick="resetDiag()">清空重置</button>
</div>
<div id="pInch" class="hide">
<div class="fields">
<div class="fld"><label>英寸 (inch)</label><input type="number" id="inchV" placeholder="输入英寸" step="any" oninput="cI()"></div>
<div class="fld"><label>毫米 (mm)</label><input type="number" id="mmV" placeholder="输入毫米" step="any" oninput="cM()"></div>
</div>
<div class="res" style="display:block;margin-top:16px;background:linear-gradient(135deg,#e8f5e9,#f1f8e9)"><div class="rl">换算关系</div><div style="font-size:16px;font-weight:700;color:#388e3c">1 英寸 = 25.4 毫米</div></div>
<button class="rst" onclick="rI()">清空重置</button>
</div>
<div id="pTol" class="hide">
<div class="ref-title">线性尺寸极限偏差 (GB/T 1804)</div>
<img class="ref-img" src="tolerance.png" alt="线性尺寸极限偏差">
</div>
<div id="pRough" class="hide">
<div class="ref-title">表面粗糙度与光洁度对照表</div>
<img class="ref-img" src="roughness.png" alt="表面粗糙度对照表">
</div>
</div>
<p style="text-align:center;font-size:11px;color:#c8c8c8;margin:10px 0 0;letter-spacing:.3px;">免责声明: 本工具仅提供理论重量参考，不作结算验收依据，实际重量以实物称重为准.</p>
</div>
