编写程序：有92号和95号汽油可以选择，选择你需要的汽油，并输入需要加油的升数，点击按钮“`计算总价钱`“在div中可以得到你所需要支付的价格
需求：
有92号汽油和95号可以选择，选择你需要的汽油，并输入需要加油的升数，点击按钮"计算总价钱"在div中可以得到你所需要支付的价格。结构如下图所示：
详细代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 500px;height: 100px;background-color: pink;border: 5px solid skyblue;border-radius: 10px;}div {margin-top: 20px;}</style>
</head><body><div><label for="radio1">92号，8.56元/升</label><input type="radio" name="oil" checked id="radio1" value="8.56"></div><div><label for="radio">95号,9.16元/升</label><input type="radio" name="oil" id="radio2" value="9.16"></div><div><input type="text" placeholder="请输入加油的升数" name="oil" id="txt"></div><div><button id="btn">计算总价钱</button></div><div id="box"></div>
</body>
<script>// 获取页面元素 var radio1 = document.getElementById("radio1");var radio2 = document.getElementById("radio2");var txt = document.getElementById("txt");var btn = document.getElementById("btn");var box = document.getElementById("box");// 按钮的点击事件btn.onclick = function () {// 获取文本框的值var num = Number(txt.value);// console.log(num)// 判断选中哪个radioif (radio1.checked) {var price = Number(radio1.value);}else {var price = Number(radio2.value);}var total = (num * price).toFixed(2);box.innerHTML = "您需要支付：" + total + "元！" ;}</script></html>
效果：
相关文章：
编写程序：有92号和95号汽油可以选择，选择你需要的汽油，并输入需要加油的升数，点击按钮“`计算总价钱`“在div中可以得到你所需要支付的价格
需求： 有92号汽油和95号可以选择，选择你需要的汽油，并输入需要加油的升数，点击按钮"计算总价钱"在div中可以得到你所需要支付的价格。结构如下图所示： 详细代码如下： <!DOCTYPE html> &l…...
参考文献去哪里查找，参考文献标准格式是什么
1、参考文献类型： 普通图书[M]、期刊文章[J]、报纸文章[N]、论文集[C]、学位论 文[D]、报告[R]、标准[s]、专利[P]、数据库[DB]、计算机程序[CP]、电 子公告[EB]、联机网络[OL]、网上期刊[J／OL]、网上电子公告[EB／OL]、其他未 说明文献[z]。…...
WIFI标签操作步骤
1. 打开并设置手机WIFI热点，设置SSID为ESL，密码为123456789（如下图） 2. 运行APP，设置要接入的WIFI名称密码等信息（如下图） 3. 长按背面按键（长按2-3秒），…...
【Hello Linux】命令行解释器
作者：小萌新 专栏：Linux 作者简介：大二学生 希望能和大家一起进步！ 本篇博客简介：使用进程的基础知识和进程控制知识做出一个简单的shell程序 命令行解释器介绍搭架子缓冲区获取命令如何从标准输入中获取字符串解析命令…...
开源一个通用的 HTTP 请求前端组件
像 Postman 这样可视化的 HTTP 请求工具是调试 API 不可或缺的利器。Postman 虽好但也越来越重，而且如果要整合到其他工具中，显然 Postman 又不是一个可行的方案。于是我想打造一个简单的前端组件（widget），它是一个标准…...
等保测评机构资质申请条件是什么？个人可以申请吗？
最近看到不少网友在问，等保测评机构资质申请条件是什么？个人可以申请吗？今天我们小编就来给大家详细回答一下。 等保测评机构资质申请条件是什么？个人可以申请吗？ 【回答】：首先需要明确一点的是…...
android 卡顿、ANR优化（1）屏幕刷新机制
前言： 本文通过阅读各种文章和源码总结出来的，如有不对，还望指出 目录 正文 基础概念 视觉暂留 逐行扫描 帧 CPU/GPU/Surface： 帧率、刷新率、画面撕裂 画面撕裂 Android屏幕刷新机制的演变 单缓存（And…...
Landsat8中*_MTL.txt文件详解
01 什么是*_MTL.txt文件？所有的Landsat8 1级数据产品中均包含MTL.txt(Metadata File)文件。Landsat MTL文件包含对数据的系统搜索和归档分类有益的信息。该文件还包含关于数据处理和恶对增强陆地卫星数据有重要价值的信息（例如转换为反射率和辐射亮度&am…...
好的提高代码质量的方法有哪些？有什么经验和技巧？
用于确保代码质量的6个高层策略： 1 编写易于理解的代码 考虑如下这段文本。我们有意地使其变得难以理解，因此，不要浪费太多时间去解读。粗略地读一遍，尽可能吸收其中的内容。 〓ts〓取一个碗，我们现在称之为A。取一…...
yum保留安装包
一. 用downloadonly下载 1.1 处理依赖关系自动下载到/tmp/pages目录，pages这个目录会自动创建 yum install --downloadonly --downloaddir/tmp/pages ceph-deploy注意，如果下载的包包含了任何没有满足的依赖关系，yum将会把所有的依赖关系包下…...
ERP系统哪家比较好？
ERP系统哪家好？在选择ERP系统时，我们可以按照这三个维度，然后再按照需求去选择ERP系统。 市面上ERP软件大概可以分为三大类： ① 标准ERP应用：功能比较固定，难以满足个性化需求，二次开发难度很高…...
Python读写mdb文件的实战代码
大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理…...
MAC和IP地址在字符串形式、数字形式和byte数组中的转换
MAC地址 mac地址作为网卡的物理地址，有6个byte的长度。在实际表示形式上，以每个字节的16进制，中间用冒号隔开，比如：“01:02:03:04:05:06”。这就是mac地址的字符串形式 而在网络通信传输中，需要对mac地址从字符串形式转换为数字形式或byte数组形式发送。并且网络上传输…...
时间轮来优化定时器
在raft协议中， 会初始化三个计时器是和选举有关的： voteTimer：这个timer负责定期的检查，如果当前的state的状态是候选者（STATE_CANDIDATE），那么就会发起选举 electionTimer：在一定时…...
《和AI交朋友》教学设计——初识人工智能
创新整合点 （1借助编程软件的机器学习扩展，使学生初步体验建立训练模型，让电脑进行学习的过程，进而感受人工智能的核心技术之一。 （2）借助编程软件的人工智能服务， 在编写程序时使用语音交互模块…...
机载雷达的时间简史
从地基起步 蝙蝠，虽然像人一样拥有双眼，但它看起东西来，用到的却不是眼睛。蝙蝠从鼻子里发出的超声波在传输过程中遇到物体后会立刻反弹，根据声波发射和回波接收之间的时间差，蝙蝠就可以轻易地判断出物体的位置。这一工…...
2018年MathorCup数学建模A题矿相特征迁移规律研究解题全过程文档及程序
2018年第八届MathorCup高校数学建模挑战赛 A题 矿相特征迁移规律研究 原题再现： 背景材料: 球团矿具有含铁品位高、粒度均匀、还原性能好、机械强度高、微气孔多等特性, 是高炉炼铁的重要原料之一。近年来国内外普遍认识到球团矿高温状态下冶金性能是评价炉料…...
如何在 Python 中创建对象列表
Python 中要创建对象列表： 声明一个新变量并将其初始化为一个空列表。使用 for 循环迭代范围对象。实例化一个类以在每次迭代时创建一个对象。将每个对象附加到列表中。 class Employee():def __init__(self, id):self.id idlist_of_objects []for i in range(5…...
Canny算法原理和应用
Canny算法的原理使用高斯滤波器滤波使用 Sobel 滤波器滤波获得在 x 和 y 方向上的输出，在此基础上求出梯度的强度和梯度的角度edge为边缘强度，tan为梯度方向上图表示的是中心点的梯度向量、方位角以及边缘方向（任一点的边缘与梯度向量正交&am…...
数据挖掘(2.2)--数据预处理
目录 二、数据描述 1.描述数据中心趋势 1.1平均值和截断均值 1.2加权平均值 1.3中位数（Median）和众数(Mode) 2.描述数据的分散程度 2.1箱线图 2.2方差和标准差 2.3正态分布 3.数据清洗 3.1数据缺失的处理 3.2数据清洗 二、数据描述 描述数…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...