2019年11月15日 星期五

電阻計算器 (Resistor Calculator)

最近因為經常測試電子線路
雖然網上已有其他程式人員編寫了專計算電阻的程式,但在下自己亦編寫一個可以方便自己使用的電阻計算程式

程式其實不算複雜,閣下有興趣亦可以使用,當然有 bug 亦可以報告在下


顏色第一環
(百位)
第二環
(十位)
第三環
(個位)
第四環
(倍數)
第五環
(百分比誤差 %)
第六環
(溫度系數 PPM)
四環
五環
六環
Ω
四環電阻五環電阻
黑色
啡色100
紅色50
橙色15
黃色25
綠色
藍色10
紫色5
灰色
白色
金色
銀色
無色

程式原始碼
<!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">
/*<!--*/
label.mra-block {
    display: block;
}
/*-->*/
        </style>
        <script type="text/javascript">
//<!--
window.addEventListener("load", function (event) {
    calculateOhms();
});

function calculateOhms() {
    var ds = [
        document.calculator.d0,
        document.calculator.d1,
        document.calculator.d2,
        document.calculator.d3,
        document.calculator.d4
    ];
    var r4s = [
        null,
        document.getElementById("resistor-4-1"),
        document.getElementById("resistor-4-2"),
        document.getElementById("resistor-4-3"),
        document.getElementById("resistor-4-4")
    ];
    var r5s = [
        document.getElementById("resistor-5-0"),
        document.getElementById("resistor-5-1"),
        document.getElementById("resistor-5-2"),
        document.getElementById("resistor-5-3"),
        document.getElementById("resistor-5-4")
    ];
    for (var i in ds) {
        for (var j = 0; j < ds[i].length; j++) {
            if (ds[i].item(j).checked) {
                // ds[i].item(j) = HTMLInputElement
                // ds[i].item(j).parentNode = HTMLLabelElement
                // ds[i].item(j).parentNode.parentNode = HTMLTableCellElement
                // ds[i].item(j).parentNode.parentNode.parentNode = HTMLTableRowElement
                var color = ds[i].item(j).parentNode.parentNode.parentNode.style.backgroundColor;
                var opacity = ((color == "") ? 0 : 1);
                if (r4s[i] != null) {
                    r4s[i].setAttribute("fill", color);
                    r4s[i].setAttribute("fill-opacity", opacity);
                }
                if (r5s[i] != null) {
                    r5s[i].setAttribute("fill", color);
                    r5s[i].setAttribute("fill-opacity", opacity);
                }
            }
        }
    }
    var t = trimDigit((-ds[0].value - ds[1].value - ds[2].value) * -ds[3].value);
    if (ds[4] != 0) {
        var lower = trimDigit(t * (1 - ds[4].value / 100));
        var upper = t * 2 - lower;
        t = "(" + lower + " ~ " + upper + ") " + t;
    }
    document.calculator.ohms.value = t;
}

function trimDigit(value) {
    return (value.toFixed(3) - 0);
}
//-->
        </script>
    </head>
    <body>
        <form name="calculator" action="" method="get" onreset="return false;" onsubmit="return false;">
            <table class="mra-collapse mra-table" width="95%" border="1" cellpadding="5">
                <colgroup>
                    <col width="10%"/>
                    <col width="15%"/>
                    <col width="15%"/>
                    <col width="15%"/>
                    <col width="15%"/>
                    <col width="15%"/>
                    <col width="15%"/>
                </colgroup>
                <thead>
                    <tr>
                        <th rowspan="4">顏色</th>
                        <th rowspan="2">第一環<br />(百位)</th>
                        <th>第二環<br />(十位)</th>
                        <th>第三環<br />(個位)</th>
                        <th>第四環<br />(倍數)</th>
                        <th>第五環<br />(百分比誤差)</th>
                        <th rowspan="3">第六環<br />(溫度系數)</th>
                    </tr>
                    <tr>
                        <th colspan="4">四環</th>
                    </tr>
                    <tr>
                        <th colspan="5">五環</th>
                    </tr>
                    <tr>
                        <th colspan="6">六環</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th colspan="7"><input type="text" name="ohms" style="width: 300px; text-align: right;" onkeyup="selectRings();"/>&Omega;</th>
                    </tr>
                    <tr>
                        <th colspan="7">
                            <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.71" y="10.551" width="30.427" height="91.042"/>
                                            <rect id="resistor-4-3" x="164.55" y="10.551" width="30.427" height="91.042"/>
                                            <rect id="resistor-4-4" x="260.68" y=".14428" width="11.555" height="111.74"/>
                                        </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">
                                        <path d="m367.12 5.0981c-5.9198-2.7296-16.099-4.851-22.611-4.851l-32.673-2e-6c-6.5118 0-11.84 5.3278-11.84 11.84v88.074c0 6.5118 5.3278 11.84 11.84 11.84l32.673-1.1e-4c6.5118 0 16.691-2.2364 22.611-4.8674l1.184-0.57556c5.9198-2.7132 16.099-4.851 22.611-4.851h118.15c6.5282 0 16.707 2.2528 22.611 4.851l1.184 0.5755c5.9363 2.7296 16.099 4.8674 22.627 4.8674h32.673c6.5118 0 11.84-5.3114 11.84-11.84l4.5e-4 -88.074c0-6.5118-5.3114-11.84-11.84-11.84h-32.673c-6.5282 0-16.691 2.2528-22.627 4.851l-1.184 0.59203c-5.9034 2.7296-16.083 4.851-22.611 4.851h-118.15c-6.5118 0-16.691-2.2528-22.611-4.851z" fill="#7bc6b8"/>
                                        <g fill="#000000">
                                            <path id="resistor-5-0" d="m373.39 7.466c-1.8911-0.59199-3.667-1.184-5.0976-1.8911l-1.184-0.59199c-5.9035-2.7132-16.083-4.851-22.593-4.851h-1.4307v111.75h1.4307c6.5118 0 16.691-2.2528 22.611-4.851l1.184-0.59192c1.4141-0.72353 3.2066-1.2991 5.0976-1.8911l7e-5 -97.084z"/>
                                            <rect id="resistor-5-1" x="391.87" y="10.541" width="30.421" height="91.05"/>
                                            <rect id="resistor-5-2" x="440.87" y="10.541" width="30.437" height="91.05"/>
                                            <path id="resistor-5-3" d="m487.98 10.59h23.021c3.3382 0 7.2024-1.036 7.2024-1.036v93.27s-3.3381-1.0688-7.2024-1.0688c-3.8643 0-23.021-0.11508-23.021-0.11508z"/>
                                            <rect id="resistor-5-4" x="560.68" y=".13205" width="11.56" height="111.75"/>
                                        </g>
                                        <rect x="560.68" y="9.8339" width="11.56" height="12.316" fill="#ffffff" fill-opacity=".5"/>
                                    </g>
                                </svg>
                            </div>
                        </th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr style="color:#ffffff; background-color: #000000;">
                        <th>黑色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="0" checked="checked" onchange="calculateOhms();"/>0</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="0" onchange="calculateOhms();"/>0</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="0" checked="checked" onchange="calculateOhms();"/>0</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="1" onchange="calculateOhms();"/>1</label></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr style="color:#ffffff; background-color: #880c0c;">
                        <th>啡色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="100" onchange="calculateOhms();"/>100</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="10" onchange="calculateOhms();"/>10</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="1" onchange="calculateOhms();"/>1</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="10" checked="checked" onchange="calculateOhms();"/>10</label></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="1" onchange="calculateOhms();"/>1</label></td>
                        <td>100 PPM</td>
                    </tr>
                    <tr style="color:#ffffff; background-color: #ff0000;">
                        <th>紅色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="200" onchange="calculateOhms();"/>200</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="20"  checked="checked" onchange="calculateOhms();"/>20</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="2" checked="checked" onchange="calculateOhms();"/>2</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="100" onchange="calculateOhms();"/>100</label></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="2" onchange="calculateOhms();"/>2</label></td>
                        <td>50 PPM</td>
                    </tr>
                    <tr style="color:#000000; background-color: #ffa800;">
                        <th>橙色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="300" onchange="calculateOhms();"/>300</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="30" onchange="calculateOhms();"/>30</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="3" onchange="calculateOhms();"/>3</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="1000" onchange="calculateOhms();"/>1000</label></td>
                        <td></td>
                        <td>15 PPM</td>
                    </tr>
                    <tr style="color:#000000; background-color: #ffff00;">
                        <th>黃色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="400" onchange="calculateOhms();"/>400</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="40" onchange="calculateOhms();"/>40</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="4" onchange="calculateOhms();"/>4</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="10000" onchange="calculateOhms();"/>10000</label></td>
                        <td></td>
                        <td>25 PPM</td>
                    </tr>
                    <tr style="color:#ffffff; background-color: #008a00;">
                        <th>綠色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="500" onchange="calculateOhms();"/>500</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="50" onchange="calculateOhms();"/>50</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="5" onchange="calculateOhms();"/>5</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="100000" onchange="calculateOhms();"/>100000</label></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="0.5" onchange="calculateOhms();"/>0.5</label></td>
                        <td></td>
                    </tr>
                    <tr style="color:#ffffff; background-color: #00008a;">
                        <th>藍色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="600" onchange="calculateOhms();"/>600</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="60" onchange="calculateOhms();"/>60</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="6" onchange="calculateOhms();"/>6</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="1000000" onchange="calculateOhms();"/>1000000</label></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="0.25" onchange="calculateOhms();"/>0.25</label></td>
                        <td></td>
                    </tr>
                    <tr style="color:#ffffff; background-color: #ff00ff;">
                        <th>紫色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="700" onchange="calculateOhms();"/>700</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="70" onchange="calculateOhms();"/>70</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="7" onchange="calculateOhms();"/>7</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="10000000" onchange="calculateOhms();"/>10000000</label></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="0.1" onchange="calculateOhms();"/>0.1</label></td>
                        <td></td>
                    </tr>
                    <tr style="color:#ffffff; background-color: #888888;">
                        <th>灰色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="800" onchange="calculateOhms();"/>800</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="80" onchange="calculateOhms();"/>80</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="8" onchange="calculateOhms();"/>8</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="100000000" onchange="calculateOhms();"/>100000000</label></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="0.5" onchange="calculateOhms();"/>0.5</label></td>
                        <td></td>
                    </tr>
                    <tr style="color:#000000; background-color: #ffffff;">
                        <th>白色</th>
                        <td><label class="mra-block"><input type="radio" name="d0" value="900" onchange="calculateOhms();"/>900</label></td>
                        <td><label class="mra-block"><input type="radio" name="d1" value="90" onchange="calculateOhms();"/>90</label></td>
                        <td><label class="mra-block"><input type="radio" name="d2" value="9" onchange="calculateOhms();"/>9</label></td>
                        <td><label class="mra-block"><input type="radio" name="d3" value="1000000000" onchange="calculateOhms();"/>1000000000</label></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr style="color:#000000; background-color: #c0c800;">
                        <th>金色</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="5" checked="checked" onchange="calculateOhms();"/>5</label></td>
                        <td></td>
                    </tr>
                    <tr style="color:#000000; background-color: #c8c8c8;">
                        <th>銀色</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="10" onchange="calculateOhms();"/>10</label></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>無色</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><label class="mra-block"><input type="radio" name="d4" value="20" onchange="calculateOhms();"/>20</label></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

沒有留言 :

張貼留言