作为程序员,没有合适的工具,就得手搓一个,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;
}
线上运行,可以直接打开:黄金重量计算器
标签:size,color,重量,important,background,计算器,font,border,黄金 From: https://blog.csdn.net/yuchangchenTT/article/details/143481430