? ? ? ?作為程序員，沒有合適的工具限次，就得手搓一個(gè)芒涡，PC端，移動(dòng)端均可適用。廢話不多說费尽，直接上代碼赠群。
HTML:
<div class="calculator"><label for="volume">體積 (單位: 立方厘米):</label> <input id="volume" required="" step="0.01" type="number" placeholder="請(qǐng)輸入體積"> <label for="density">密度 (單位: 克/立方厘米):</label> <input id="density" required="" step="0.01" type="number" value="19.32" placeholder="請(qǐng)輸入密度"><button onclick="calculateGoldWeight()">計(jì)算黃金重量</button><div id="result" class="result">結(jié)果將在此顯示</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 = "請(qǐng)?zhí)峁┯行У捏w積和密度。"; return; } // 計(jì)算黃金重量 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; }
線上運(yùn)行依啰，可以直接打開：黃金重量計(jì)算器
