效果

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 = nulllet disabledInputText = nullconst inputRadios = document.querySelectorAll("input[type='radio']")// console.log(inputRadios)inputRadios.forEach((currentValue, currentIndex, listObj) => {// console.log(currentValue)const inputRadio = currentValueif(inputRadio.disabled) { // 不设置 VCCreturn}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.nextElementSiblinginputText.disabled = truedisabledInputText = inputText // 保存被禁用的 input[type="text"] 元素}})const inputTexts = document.querySelectorAll("input[type='text']")// console.log(inputTexts)let vcc = r1 = r2 = vout = 0inputTexts.forEach((currentValue, currentIndex, listObj) => {// console.log(currentValue)const inputText = currentValueinputText.oninput = (event) => {const target = event.target// console.log(event, target.placeholder, target.value)switch(target.placeholder) {case VCC:vcc = target.valuebreakcase R1:r1 = target.valuebreakcase R2:r2 = target.valuebreakcase VOUT:vout = target.valuebreak}// console.log(vcc, r1, r2, vout)disabledInputText.value = calculate(vcc, r1, r2, vout, checkedInputRadio.value)// 更新switch(checkedInputRadio.value) {case R1:r1 = disabledInputText.valuebreakcase R2:r2 = disabledInputText.valuebreakcase VOUT:vout = disabledInputText.valuebreak}// 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 - R2return vcc * r2 / vout - r2case 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>

硬件 JavaScript - 一个【电阻分压器 - 计算器】相关推荐

前端 JavaScript 实现一个简易计算器
前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...
用JavaScript实现一个简易计算器功能
简易计算器文章目录简易计算器界面一览一.需求二.body创建整体显示外观三.css样式四.JavaScript事件函数五.小结界面一览一.需求 1.构建出计算器外观. 2.显示屏跟 ...
基于JavaScript实现网页计算器
基于JavaScript的网页计算器基于HTML.CSS.JavaScript制作的网页计算器,其中可以实现加.减.乘.除.取整.求余.阶乘.科学计数等功能界面如下: 代码如下: 有兴趣的朋友欢迎 ...
html怎么实现计算bmi,利用Javascript实现BMI计算器
前言 BMI指数(英文为Body Mass Index),是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准,当我们需要比较及分析一个人的体重对于不同高度的人所带来的健康影响时,BMI值是一个中 ...
JavaScript实现贷款利息计算器
JavaScript实现贷款利息计算器代码运行结果为了简洁明了,就省去样式了,只留计算和赋值显示的部分~ 需要自行引入jQuery 代码 <!DOCTYPE html PUBLIC &qu ...
【微信小程序控制硬件③】从软件到硬件搭建一个微信小程序控制esp8266的项目，自定义通讯协议，为面试职位和比赛项目加分！
微信物联网生态主要分在微信硬件开发平台与腾讯物联开发平台,前者已经停止维护,但依然有着很大的学习价值,而后者作为主推的平台,集成很多功能,包括从微信小程序实现配网到控制: 为了兼顾更多的朋友和自己的学 ...
JavaScript简单版计算器
JavaScript简单版计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
计算器html js php代码,javascript如何实现计算器功能
这次给大家带来javascript如何实现计算器功能,javascript实现计算器功能的注意事项有哪些,下面就是实战案例,一起来看一下. 这个计算机主要通过二维数组将其存在一个数组中,再通过函数控制 ...
JavaScript 网页简易计算器
[简易计算器]运用HTML.CSS.JavaScript,设计一个简易计算器. <!DOCTYPE html> <html lang="en"> <h ...

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

效果

HTML & JavaScript 代码

硬件 JavaScript - 一个【电阻分压器 - 计算器】相关推荐

最新文章

热门文章