硬件 & JavaScript - 一个【电阻分压器 - 计算器】

本文链接：https://blog.csdn.net/qq_29761395/article/details/120101450
效果

在这里插入图片描述
HTML & JavaScript 代码

在这里插入图片描述
计算公式：VOUT = VCC / (R1 + R2) * R2
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>电阻分压器 - 计算器</title>
        <style type="text/css">
            img {
                width: 500px;
                border-style: solid;
                border-width: 1px;
                border-color: #000000;
            }
            span {
                user-select: none;
            }
            label {
                width: 50px;
                display: inline-block;
                user-select: none;
            }
            input[type="text"]:focus {
                outline: none;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img/Resistive%20Divider.png" >
        </div>
        <div>
            <input type="radio" disabled />
            <label>VCC</label>
            <input type="text" id="vcc" placeholder="VCC" />
            <span>V</span>
            <br>
            <input type="radio" name="parameter" id="r1" value="R1" checked />
            <label for="r1">R1</label>
            <input type="text" id="resistor1" placeholder="R1" disabled />
            <span>Ω</span>
            <br>
            <input type="radio" name="parameter" id="r2" value="R2" />
            <label for="r2">R2</label>
            <input type="text" id="resistor2" placeholder="R2" />
            <span>Ω</span>
            <br>
            <input type="radio" name="parameter" id="vout" value="VOUT" />
            <label for="vout">VOUT</label>
            <input type="text" id="voltageOutput" placeholder="VOUT" />
            <span>V</span>
        </div>
        
        <script type="text/javascript">
            window.onload = function(event) {
                main()
            }

            function main() {
                const VCC = "VCC"
                const R1 = "R1"
                const R2 = "R2"
                const VOUT = "VOUT"
                
                let checkedInputRadio = null
                let disabledInputText = null
                
                const inputRadios = document.querySelectorAll("input[type='radio']")
                // console.log(inputRadios)
                inputRadios.forEach((currentValue, currentIndex, listObj) => {
                    // console.log(currentValue)
                    const inputRadio = currentValue
                    if(inputRadio.disabled) { // 不设置 VCC
                        return
                    }
                    
                    if(inputRadio.checked) { // 保存默认勾选的 input[type="radio"] 元素
                        checkedInputRadio = inputRadio // 获取 radio 元素
                        disabledInputText = inputRadio.nextElementSibling.nextElementSibling // 获取 radio 元素后面的输入框
                    }
                    // console.log(checkedInputRadio)
                    
                    inputRadio.onchange = (event) => {
                        const target = event.target
                        // console.log(event, target, target.checked)
                        checkedInputRadio = target // 保存默认勾选的 input[type="radio"] 元素
                        // console.log(checkedInputRadio)
                        
                        if (disabledInputText) {
                            disabledInputText.disabled = false // 清除上一个被禁用的 input[type="text"] 元素
                        }
                        const inputText = target.nextElementSibling.nextElementSibling
                        inputText.disabled = true
                        disabledInputText = inputText // 保存被禁用的 input[type="text"] 元素
                    }
                })
                
                const inputTexts = document.querySelectorAll("input[type='text']")
                // console.log(inputTexts)
                let vcc = r1 = r2 = vout = 0
                inputTexts.forEach((currentValue, currentIndex, listObj) => {
                    // console.log(currentValue)
                    const inputText = currentValue
                    inputText.oninput = (event) => {
                        const target = event.target
                        // console.log(event, target.placeholder, target.value)
                        switch(target.placeholder) {
                            case VCC:
                                vcc = target.value
                                break
                            case R1:
                                r1 = target.value
                                break
                            case R2:
                                r2 = target.value
                                break
                            case VOUT:
                                vout = target.value
                                break
                        }
                        // console.log(vcc, r1, r2, vout)
                        disabledInputText.value = calculate(vcc, r1, r2, vout, checkedInputRadio.value)
                        // 更新
                        switch(checkedInputRadio.value) {
                            case R1:
                                r1 = disabledInputText.value
                                break
                            case R2:
                                r2 = disabledInputText.value
                                break
                            case VOUT:
                                vout = disabledInputText.value
                                break
                        }
                        // console.log(target, disabledInputText)
                        // console.log(vcc, r1, r2, vout)
                    }
                })
                
                /**
                 * VOUT = VCC / (R1 + R2) * R2
                 */
                function calculate(vcc, r1, r2, vout, checked) {
                    vcc = Number.parseFloat(vcc)
                    r1 = Number.parseFloat(r1)
                    r2 = Number.parseFloat(r2)
                    vout = Number.parseFloat(vout)
                    
                    // console.log(checked)
                    switch(checked) {
                        case R1: // R1 = VCC * R2 / VOUT - R2
                            return vcc * r2 / vout - r2
                        case R2: // R2 = R1 * VOUT / (VCC - VOUT)
                            return vout * r1 / (vcc - vout)
                        case VOUT: // VOUT = VCC * R2 / (R1 + R2)
                            return vcc * r2 / (r1 + r2)
                    }
                }
            }
        </script>
    </body>
</html>