电阻、电容丝印转换成阻值，容值代码方案
2024-11-09 12:03:52
晨欣小编
复制以下代码，新建一个txt文本，粘贴，保存后，将 新建文本.txt 修改成 00.html，双击打开，即可使用，方便快捷！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电阻电容丝印换算工具</title>
<!-- 引入Bootstrap样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
font-family: 'Arial', sans-serif;
}
.container {
max-width: 600px;
margin-top: 50px;
}
.form-group label {
font-weight: bold;
}
.form-control {
height: calc(2.25rem + 2px);
}
.btn {
background-color: #007bff;
color: white;
}
.btn:hover {
background-color: #0056b3;
}
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.result {
background-color: #e9ecef;
padding: 10px;
border-radius: 5px;
font-weight: bold;
}
.lead {
font-size: 18px;
}
</style>
</head>
<body>
<div>
<h1>电阻和电容丝印换算工具</h1>
<form id="conversionForm">
<div>
<label for="value">请输入丝印值：</label>
<input type="text" id="value" required>
</div>
<button type="submit" class="btn btn-primary w-100">计算</button>
</form>
<div id="result" class="result mt-4" style="display:none;">
<h4>计算结果：</h4>
<p id="resistorResult"></p>
<p id="capacitorResult"></p>
</div>
</div>
<!-- 引入Bootstrap脚本 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 电阻计算函数
function calculateResistor(value) {
// 确保输入值是一个有效的数字
if (!/^\d{3}$/.test(value)) {
return "无效输入，请输入有效的电阻丝印（3位数字）";
}
// 拆分数字，前两位为有效数字，第三位为幂
const digits = value.split('');
const base = parseInt(digits[0] + digits[1]); // 前两位数字
const multiplier = Math.pow(10, parseInt(digits[2])); // 第三位作为幂
// 计算电阻值
const resistance = base * multiplier;
// 根据不同的单位返回结果
const resistanceResult = {
ohm: resistance,
kohm: resistance / 1000,
moh: resistance / 1000000
};
return `
电阻值：${resistanceResult.ohm}Ω (欧姆) <br>
电阻值：${resistanceResult.kohm.toFixed(2)}kΩ (千欧) <br>
电阻值：${resistanceResult.moh.toFixed(6)}MΩ (兆欧)
`;
}
// 电容计算函数
function calculateCapacitor(value) {
// 确保输入值是一个有效的数字
if (!/^\d{3}$/.test(value)) {
return "无效输入，请输入有效的电容丝印（3位数字）";
}
// 拆分数字，前两位为有效数字，第三位为幂
const digits = value.split('');
const base = parseInt(digits[0] + digits[1]); // 前两位数字
const multiplier = Math.pow(10, parseInt(digits[2])); // 第三位作为幂
// 计算电容值
const capacitance = base * multiplier;
// 根据不同的单位返回结果
const capacitanceResult = {
pf: capacitance,
nf: capacitance / 1000,
uf: capacitance / 1000000
};
return `
电容值：${capacitanceResult.pf}pF (皮法) <br>
电容值：${capacitanceResult.nf.toFixed(2)}nF (纳法) <br>
电容值：${capacitanceResult.uf.toFixed(6)}μF (微法)
`;
}
// 表单提交事件
document.getElementById('conversionForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const value = document.getElementById('value').value;
let resistorResult = '';
let capacitorResult = '';
// 计算电阻结果
resistorResult = calculateResistor(value);
// 计算电容结果
capacitorResult = calculateCapacitor(value);
// 显示计算结果
document.getElementById('resistorResult').innerHTML = resistorResult;
document.getElementById('capacitorResult').innerHTML = capacitorResult;
// 显示结果区域
document.getElementById('result').style.display = 'block';
});
</script>
</body>
</html>
运行如下图
功能概述：
用户输入丝印值（例如
300），系统会 同时计算 电阻和电容的不同单位值（Ω、kΩ、MΩ 对应电阻，pF、nF、μF 对应电容）。计算结果会 同时显示 在页面上，而无需选择类型。
主要修改：
同时显示电阻和电容的结果：
不再要求用户选择电阻或电容类型，输入一个丝印值后，页面会同时显示电阻和电容的不同单位值。
计算函数：
电阻计算函数
calculateResistor(value)和电容计算函数calculateCapacitor(value)都会根据输入的丝印值分别计算结果。电阻计算返回多个单位值：Ω、kΩ、MΩ。
电容计算返回多个单位值：pF、nF、μF。
示例：
假设用户输入了丝印值 300：
电阻结果：
scss复制代码电阻值：30Ω (欧姆)电阻值：0.03kΩ (千欧)电阻值：0.00003MΩ (兆欧)
电容结果：
scss复制代码电容值：300pF (皮法)电容值：0.3nF (纳法)电容值：0.0003μF (微法)
如何使用：
保存此代码为
.html文件（例如resistor_and_capacitor_calculator.html）。用浏览器打开文件，即可使用该计算工具。
输入丝印值，点击计算按钮，页面会自动显示电阻和电容的计算结果。
总结：
这种方式无需用户选择电阻或电容，直接显示两者的计算结果，让用户能够更加方便地获得所需信息。
售前客服