但 THT 電阻要將色環轉成數字再計算才知道電阻值
在下仍然只是新手，未能一看便知哪種色環的電阻適合
網上通常都是選定顏色後計算電阻值，但好像找不到輸入電阻值換成色環
因此在下編寫這個反向計算器，方便尋找對應色環的電阻
| 四環電阻 | 五環電阻 |
|---|---|
程式源始碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>電阻色環反向計算器</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
/*<!--*/
input#resistor-value {
font-size: 20pt;
font-family: "Courier New";
width: 200px;
}
/*-->*/
</style>
<script type="text/javascript">
//<!--
window.addEventListener("load", function(){
changeColorRings();
});
var defaultColors = [
"000000",
"880c0c",
"ff0000",
"ffa800",
"ffff00",
"008a00",
"00008a",
"ff00ff",
"888888",
"ffffff",
"c0c800",
"c8c8c8",
null
];
var ranges = [
{"id": 8, "value": 0.0005},
{"id": 7, "value": 0.001},
{"id": 6, "value": 0.0025},
{"id": 5, "value": 0.005},
{"id": 1, "value": 0.01},
{"id": 2, "value": 0.02},
{"id": 10, "value": 0.05},
{"id": 11, "value": 0.1},
{"id": 12, "value": 0.2}
];
function getColorRings(value, length){
var ds = [];
for (var i = 0; i < length; i++){
ds.push(0);
}
length -= 2;
ds[length + 1] = 12;
if (value > 0){
var v = value;
if (v >= Math.pow(10, length)){
ds[length] = ("" + v).length - length;
}
for (var i = 0; i < length; i++){
var d = Math.pow(10, ds[length] + length - i - 1);
ds[i] = Math.floor(v / d);
v -= d * ds[i];
}
value = v / value;
}
for (var i in ranges){
if (value < ranges[i].value){
ds[length + 1] = ranges[i].id - 0;
break;
}
}
return ds;
}
function trimDigit(value) {
return (value.toFixed(3) - 0);
}
function changeColorRings(){
var value = document.getElementById("resistor-value").value;
var indices;
indices = getColorRings(value, 4);
document.getElementById("resistor-4-1").setAttribute("fill", "#" + defaultColors[indices[0]]);
document.getElementById("resistor-4-2").setAttribute("fill", "#" + defaultColors[indices[1]]);
document.getElementById("resistor-4-3").setAttribute("fill", "#" + defaultColors[indices[2]]);
document.getElementById("resistor-4-4").setAttribute("fill", "#" + defaultColors[indices[3]]);
document.getElementById("resistor-4-4").setAttribute("fill-opacity", ((indices[3] == 12) ? 0 : 1));
indices = getColorRings(value, 5);
document.getElementById("resistor-5-0").setAttribute("fill", "#" + defaultColors[indices[0]]);
document.getElementById("resistor-5-1").setAttribute("fill", "#" + defaultColors[indices[1]]);
document.getElementById("resistor-5-2").setAttribute("fill", "#" + defaultColors[indices[2]]);
document.getElementById("resistor-5-3").setAttribute("fill", "#" + defaultColors[indices[3]]);
document.getElementById("resistor-5-4").setAttribute("fill", "#" + defaultColors[indices[4]]);
document.getElementById("resistor-5-4").setAttribute("fill-opacity", ((indices[4] == 12) ? 0 : 1));
}
//-->
</script>
</head>
<body>
<div>
<div>
<input id="resistor-value" type="number" min="0" max="999000000000" step="1" value="0" oninput="changeColorRings();" onkeyup="changeColorRings();" onkeydown="changeColorRings();"/>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="600" height="112">
<g stroke-width="16.444">
<path d="m67.127 5.1048c-5.9195-2.7229-16.101-4.854-22.612-4.854h-32.676c-6.5115 0-11.839 5.3276-11.839 11.839v88.071c0 6.5234 5.3276 11.839 11.839 11.839h32.676c6.5115 0 16.693-2.2376 22.612-4.854l1.1839-0.58011c5.9195-2.723 16.101-4.854 22.612-4.854h118.15c6.5234 0 16.681 2.2376 22.6 4.854l1.1958 0.58011c5.9195 2.7229 16.077 4.854 22.612 4.854h32.676c6.5352 0 11.839-5.3158 11.839-11.839v-88.071c0-6.5115-5.3039-11.839-11.839-11.839h-32.676c-6.5352 0-16.693 2.2495-22.612 4.854l-1.1958 0.59198c-5.9195 2.7229-16.077 4.854-22.6 4.854h-118.15c-6.5115 0-16.693-2.2495-22.612-4.854z" fill="#d9b477"/>
<g fill="#000000">
<path id="resistor-4-1" d="m73.388 7.4727c-1.8943-0.59196-3.6701-1.1839-5.0908-1.8943l-1.1839-0.59196c-5.9195-2.7111-16.101-4.854-22.612-4.854h-1.4207v111.75h1.4207c6.5115 0 16.693-2.2376 22.612-4.854l1.1839-0.58011c1.4207-0.73402 3.1965-1.3141 5.0908-1.8943z"/>
<rect id="resistor-4-2" x="103.87" y="10.541" width="30.427" height="91.05"/>
<rect id="resistor-4-3" x="163.87" y="10.541" width="30.427" height="91.05"/>
<rect id="resistor-4-4" x="260.68" y=".13205" width="11.56" height="111.75" fill-opacity="0"/>
</g>
<rect x="260.68" y="9.8404" width="11.555" height="12.313" fill="#ffffff" fill-opacity=".5"/>
</g>
<g stroke-width="16.444" transform="translate(300,0)">
<path d="m67.127 5.1048c-5.9195-2.7229-16.101-4.854-22.612-4.854h-32.676c-6.5115 0-11.839 5.3276-11.839 11.839v88.071c0 6.5234 5.3276 11.839 11.839 11.839h32.676c6.5115 0 16.693-2.2376 22.612-4.854l1.1839-0.58011c5.9195-2.723 16.101-4.854 22.612-4.854h118.15c6.5234 0 16.681 2.2376 22.6 4.854l1.1958 0.58011c5.9195 2.7229 16.077 4.854 22.612 4.854h32.676c6.5352 0 11.839-5.3158 11.839-11.839v-88.071c0-6.5115-5.3039-11.839-11.839-11.839h-32.676c-6.5352 0-16.693 2.2495-22.612 4.854l-1.1958 0.59198c-5.9195 2.7229-16.077 4.854-22.6 4.854h-118.15c-6.5115 0-16.693-2.2495-22.612-4.854z" fill="#7bc6b8"/>
<g fill="#000000">
<path id="resistor-5-0" d="m73.388 7.4727c-1.8943-0.59196-3.6701-1.1839-5.0908-1.8943l-1.1839-0.59196c-5.9195-2.7111-16.101-4.854-22.612-4.854h-1.4207v111.75h1.4207c6.5115 0 16.693-2.2376 22.612-4.854l1.1839-0.58011c1.4207-0.73402 3.1965-1.3141 5.0908-1.8943z"/>
<rect id="resistor-5-1" x="91.87" y="10.541" width="30.437" height="91.05"/>
<rect id="resistor-5-2" x="136.87" y="10.541" width="30.437" height="91.05"/>
<rect id="resistor-5-3" x="181.87" y="10.541" width="30.437" height="91.05"/>
<rect id="resistor-5-4" x="260.68" y=".13205" width="11.56" height="111.75" fill-opacity="0"/>
</g>
<rect x="260.68" y="9.8404" width="11.555" height="12.313" fill="#ffffff" fill-opacity=".5"/>
</g>
</svg>
</div>
</body>
</html>最後在下都找到一個反向計算器，當然對方亦做得比在下的漂亮
有興趣可以比較一下
https://resistor.cherryjourney.pt/
沒有留言 :
張貼留言