就是这个样的粗爆，手搓一个计算器：黄金重量计算器

       作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。

HTML:

<div class="calculator"><label for="volume">体积 (单位: 立方厘米):</label> <input id="volume" required="" step="0.01" type="number" placeholder="请输入体积"> <label for="density">密度 (单位: 克/立方厘米):</label> <input id="density" required="" step="0.01" type="number" value="19.32" placeholder="请输入密度"><button onclick="calculateGoldWeight()">计算黄金重量</button><div id="result" class="result">结果将在此显示</div></div>

JS:

function calculateGoldWeight() {const volume = parseFloat(document.getElementById('volume').value);const density = parseFloat(document.getElementById('density').value);if (!volume || !density) {document.getElementById('result').innerText = "请提供有效的体积和密度。";return;}// 计算黄金重量const weight = volume * density;document.getElementById('result').innerText = `黄金重量: ${weight.toFixed(2)} 克`;}

CSS:

.calculator {width: 100%;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;
}button:hover {background-color: orange;
}.result {font-size: 18px;margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}

 线上运行，可以直接打开：黄金重量计算器