效果
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>
1936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
