2019-11-17

電阻色環反向計算器 (Resistor Color Rings Reverse Calculator)

接駁電子零件經常使用不同的電阻，使用 SMD 電阻當然可以一眼便看到
但 THT 電阻要將色環轉成數字再計算才知道電阻值
在下仍然只是新手，未能一看便知哪種色環的電阻適合

網上通常都是選定顏色後計算電阻值，但好像找不到輸入電阻值換成色環
因此在下編寫這個反向計算器，方便尋找對應色環的電阻


四環電阻五環電阻

程式源始碼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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/
Posted by HKGoldenMr.A at 22:24
Labels: ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )