当前位置： 首页 > news >正文

编写程序：有92号和95号汽油可以选择，选择你需要的汽油，并输入需要加油的升数，点击按钮“`计算总价钱`“在div中可以得到你所需要支付的价格

news 2026/3/31 22:20:59

需求：
有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中可以得到你所需要支付的价格

需求&#xff1a; 有92号汽油和95号可以选择&#xff0c;选择你需要的汽油&#xff0c;并输入需要加油的升数&#xff0c;点击按钮"计算总价钱"在div中可以得到你所需要支付的价格。结构如下图所示&#xff1a; 详细代码如下&#xff1a; <!DOCTYPE html> &l…...

编程日记 2023/4/15 23:19:23

参考文献去哪里查找，参考文献标准格式是什么

1、参考文献类型&#xff1a; 普通图书[M]、期刊文章[J]、报纸文章[N]、论文集[C]、学位论 文[D]、报告[R]、标准[s]、专利[P]、数据库[DB]、计算机程序[CP]、电 子公告[EB]、联机网络[OL]、网上期刊[J&#xff0f;OL]、网上电子公告[EB&#xff0f;OL]、其他未 说明文献[z]。…...

编程日记 2023/4/14 1:50:25

WIFI标签操作步骤

1. 打开并设置手机WIFI热点&#xff0c;设置SSID为ESL&#xff0c;密码为123456789&#xff08;如下图&#xff09; ​ 2. 运行APP&#xff0c;设置要接入的WIFI名称密码等信息&#xff08;如下图&#xff09; ​ 3. 长按背面按键&#xff08;长按2-3秒&#xff09;&#xff0c…...

编程日记 2023/4/15 23:19:14

【Hello Linux】命令行解释器

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;使用进程的基础知识和进程控制知识做出一个简单的shell程序 命令行解释器介绍搭架子缓冲区获取命令如何从标准输入中获取字符串解析命令…...

编程日记 2023/4/15 23:19:06

开源一个通用的 HTTP 请求前端组件

像 Postman 这样可视化的 HTTP 请求工具是调试 API 不可或缺的利器。Postman 虽好但也越来越重&#xff0c;而且如果要整合到其他工具中&#xff0c;显然 Postman 又不是一个可行的方案。于是我想打造一个简单的前端组件&#xff08;widget&#xff09;&#xff0c;它是一个标准…...

编程日记 2023/4/15 23:19:00

等保测评机构资质申请条件是什么？个人可以申请吗？

最近看到不少网友在问&#xff0c;等保测评机构资质申请条件是什么&#xff1f;个人可以申请吗&#xff1f;今天我们小编就来给大家详细回答一下。 等保测评机构资质申请条件是什么&#xff1f;个人可以申请吗&#xff1f; 【回答】&#xff1a;首先需要明确一点的是&#xf…...

编程日记 2023/4/15 23:18:47

android 卡顿、ANR优化（1）屏幕刷新机制

前言&#xff1a; 本文通过阅读各种文章和源码总结出来的&#xff0c;如有不对&#xff0c;还望指出 目录 正文 基础概念 视觉暂留 逐行扫描 帧 CPU/GPU/Surface&#xff1a; 帧率、刷新率、画面撕裂 画面撕裂 Android屏幕刷新机制的演变 单缓存&#xff08;And…...

编程日记 2023/4/15 23:18:41

Landsat8中*_MTL.txt文件详解

01 什么是*_MTL.txt文件&#xff1f;所有的Landsat8 1级数据产品中均包含MTL.txt(Metadata File)文件。Landsat MTL文件包含对数据的系统搜索和归档分类有益的信息。该文件还包含关于数据处理和恶对增强陆地卫星数据有重要价值的信息&#xff08;例如转换为反射率和辐射亮度&am…...

编程日记 2023/3/9 18:30:34

好的提高代码质量的方法有哪些？有什么经验和技巧？

用于确保代码质量的6个高层策略&#xff1a; 1　编写易于理解的代码 考虑如下这段文本。我们有意地使其变得难以理解&#xff0c;因此&#xff0c;不要浪费太多时间去解读。粗略地读一遍&#xff0c;尽可能吸收其中的内容。 〓ts〓取一个碗&#xff0c;我们现在称之为A。取一…...

编程日记 2023/3/9 18:29:32

yum保留安装包

一. 用downloadonly下载 1.1 处理依赖关系自动下载到/tmp/pages目录&#xff0c;pages这个目录会自动创建 yum install --downloadonly --downloaddir/tmp/pages ceph-deploy注意&#xff0c;如果下载的包包含了任何没有满足的依赖关系&#xff0c;yum将会把所有的依赖关系包下…...

编程日记 2023/3/9 18:28:29

ERP系统哪家比较好？

ERP系统哪家好&#xff1f;在选择ERP系统时&#xff0c;我们可以按照这三个维度&#xff0c;然后再按照需求去选择ERP系统。 市面上ERP软件大概可以分为三大类&#xff1a; ① 标准ERP应用&#xff1a;功能比较固定&#xff0c;难以满足个性化需求&#xff0c;二次开发难度很高…...

编程日记 2023/3/9 18:27:27

Python读写mdb文件的实战代码

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理…...

编程日记 2023/3/9 18:26:25

MAC和IP地址在字符串形式、数字形式和byte数组中的转换

MAC地址 mac地址作为网卡的物理地址，有6个byte的长度。在实际表示形式上，以每个字节的16进制，中间用冒号隔开，比如：“01:02:03:04:05:06”。这就是mac地址的字符串形式 而在网络通信传输中，需要对mac地址从字符串形式转换为数字形式或byte数组形式发送。并且网络上传输…...

编程日记 2023/3/9 18:25:23

时间轮来优化定时器

在raft协议中&#xff0c; 会初始化三个计时器是和选举有关的&#xff1a; voteTimer&#xff1a;这个timer负责定期的检查&#xff0c;如果当前的state的状态是候选者&#xff08;STATE_CANDIDATE&#xff09;&#xff0c;那么就会发起选举 electionTimer&#xff1a;在一定时…...

编程日记 2023/3/9 18:24:18

《和AI交朋友》教学设计——初识人工智能

创新整合点 &#xff08;1借助编程软件的机器学习扩展&#xff0c;使学生初步体验建立训练模型&#xff0c;让电脑进行学习的过程&#xff0c;进而感受人工智能的核心技术之一。 &#xff08;2&#xff09;借助编程软件的人工智能服务&#xff0c; 在编写程序时使用语音交互模块…...

编程日记 2023/3/9 18:23:14

机载雷达的时间简史

从地基起步 蝙蝠&#xff0c;虽然像人一样拥有双眼&#xff0c;但它看起东西来&#xff0c;用到的却不是眼睛。蝙蝠从鼻子里发出的超声波在传输过程中遇到物体后会立刻反弹&#xff0c;根据声波发射和回波接收之间的时间差&#xff0c;蝙蝠就可以轻易地判断出物体的位置。这一工…...

编程日记 2023/3/9 18:22:13

2018年MathorCup数学建模A题矿相特征迁移规律研究解题全过程文档及程序

2018年第八届MathorCup高校数学建模挑战赛 A题 矿相特征迁移规律研究 原题再现&#xff1a; 背景材料:   球团矿具有含铁品位高、粒度均匀、还原性能好、机械强度高、微气孔多等特性, 是高炉炼铁的重要原料之一。近年来国内外普遍认识到球团矿高温状态下冶金性能是评价炉料…...

编程日记 2023/3/9 18:21:09

如何在 Python 中创建对象列表

Python 中要创建对象列表&#xff1a; 声明一个新变量并将其初始化为一个空列表。使用 for 循环迭代范围对象。实例化一个类以在每次迭代时创建一个对象。将每个对象附加到列表中。 class Employee():def __init__(self, id):self.id idlist_of_objects []for i in range(5…...

编程日记 2023/3/9 18:20:07

Canny算法原理和应用

Canny算法的原理使用高斯滤波器滤波使用 Sobel 滤波器滤波获得在 x 和 y 方向上的输出&#xff0c;在此基础上求出梯度的强度和梯度的角度edge为边缘强度&#xff0c;tan为梯度方向上图表示的是中心点的梯度向量、方位角以及边缘方向&#xff08;任一点的边缘与梯度向量正交&am…...

编程日记 2023/3/9 18:19:04

数据挖掘(2.2)--数据预处理

目录 二、数据描述 1.描述数据中心趋势 1.1平均值和截断均值 1.2加权平均值 1.3中位数&#xff08;Median&#xff09;和众数(Mode) 2.描述数据的分散程度 2.1箱线图 2.2方差和标准差 2.3正态分布 3.数据清洗 3.1数据缺失的处理 3.2数据清洗 二、数据描述 描述数…...

编程日记 2023/3/9 18:18:00

《跨摄像机追踪的终局：镜像视界空间计算方案深度解析》——从“识别与匹配”走向“空间计算与连续存在”的最终形态

跨摄像机追踪的终局&#xff1a;镜像视界空间计算方案深度解析——从“识别与匹配”走向“空间计算与连续存在”的最终形态发布单位&#xff1a;镜像视界&#xff08;浙江&#xff09;科技有限公司一、问题终局&#xff1a;跨摄像机追踪到底要解决什么&#xff1f;在过去十年中…...

编程新知 2026/3/31 22:09:58

【2026年最新600套毕设项目分享】基于springboot+vue的无人机共享管理系统（14299）

有需要的同学&#xff0c;源代码和配套文档领取&#xff0c;加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码&#xff08;前后端源代码SQL脚本&#xff09;配套文档&#xff08;LWPPT开题报告/任务书&#xff09;远程调试控屏包运行一键启动项目&…...

编程新知 2026/3/31 21:22:58

弧形导轨精度等级适配策略

弧形导轨是用于实现曲线运动的线性导向装置&#xff0c;广泛应用于自动化设备、机器人、医疗机械等领域。弧形导轨作为机械传动中的核心部件&#xff0c;其精度等级直接影响设备性能与稳定性。从精密加工到重型机械&#xff0c;不同场景对导轨的制造精度、运行精度及耐磨性要求…...

编程新知 2026/3/31 20:58:38

LC_numStream：嵌入式轻量级数字流解析库

1. LC_numStream 库概述&#xff1a;面向嵌入式通信的轻量级数字流解析工具LC_numStream 是一个专为资源受限嵌入式系统设计的纯 C 语言文本数字流解析库。其核心定位并非通用字符串处理&#xff0c;而是解决嵌入式设备在串口、UART、I2C、SPI 或自定义协议通信中高频出现的一类…...

编程新知 2026/3/31 20:09:39

飞腾FT2000/4外部中断开发避坑指南：如何高效处理16个中断信号

飞腾FT2000/4外部中断开发避坑指南&#xff1a;如何高效处理16个中断信号 在嵌入式系统开发中&#xff0c;中断处理机制的设计往往直接决定了系统的实时性和可靠性。飞腾FT2000/4处理器作为国产高性能芯片的代表&#xff0c;其外部中断功能在实际应用中展现出独特优势&#xff…...

编程新知 2026/3/31 20:03:34

从温控器到无人机：PID参数整定的‘手感’秘籍，附C语言代码避坑指南

从温控器到无人机&#xff1a;PID参数整定的‘手感’秘籍与实战避坑指南 在工业自动化和智能硬件开发中&#xff0c;PID控制算法就像一位隐形的调音师&#xff0c;默默调节着系统的每一个细微变化。无论是缓慢升温的工业烘箱&#xff0c;还是高速响应的四旋翼无人机&#xff0c…...

编程新知 2026/3/31 19:57:32

NaViL-9B图文理解教程：从上传图片到获取结构化描述的完整步骤

NaViL-9B图文理解教程&#xff1a;从上传图片到获取结构化描述的完整步骤 1. 认识NaViL-9B多模态模型 NaViL-9B是一款原生支持多模态交互的大语言模型&#xff0c;能够同时处理文本和图像信息。与传统的纯文本模型不同&#xff0c;它可以直接"看懂"图片内容&#x…...

编程新知 2026/3/31 19:20:54

Cesium 三维地图开发实战：主流在线底图（天地图、高德、百度等）的集成与坐标纠偏方案

1. 三维地图开发中的底图选择困境 第一次用Cesium加载国内在线地图时&#xff0c;我被满屏错位的道路和建筑搞懵了。明明在二维地图里精准对齐的学校操场&#xff0c;在三维场景里却飘到了隔壁小区。这种"灵魂出窍"般的偏移现象&#xff0c;其实是不同坐标系之间的&q…...

编程新知 2026/3/31 19:12:41

手把手教你用TI F28P65X开发板实现LED定时闪烁（基于CPU Timer2，含完整源码）

从零玩转TI F28P65X开发板&#xff1a;CPU Timer2实现可调频LED闪烁实战指南 刚拿到TI F28P65X开发板时&#xff0c;面对密密麻麻的引脚和复杂的开发环境&#xff0c;很多嵌入式新手会感到无从下手。本文将带你用最直观的方式&#xff0c;通过控制LED闪烁这个经典入门项目&…...

编程新知 2026/3/31 17:15:04

AI驱动的科研绘图革命：DeTikZify如何终结图表代码的手动时代

AI驱动的科研绘图革命&#xff1a;DeTikZify如何终结图表代码的手动时代 【免费下载链接】DeTikZify Synthesizing Graphics Programs for Scientific Figures and Sketches with TikZ 项目地址: https://gitcode.com/gh_mirrors/de/DeTikZify 当deadline遇上绘图难题&a…...

编程新知 2026/3/31 15:16:37