编写程序：有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中可以得到你所需要支付的价格相关推荐

压缩比13为什么建议用92的油_92号和95号汽油，哪个更耐烧？车主：欢迎入坑
近几天我发现一个很有意思的现象,由于国内油价经调整后重新回到"5元时代",身边很多车主原先加92号汽油的,现在趁着油价便宜加点95号汽油来为发动机"改善生活". ...
压缩比13为什么建议用92的油_92号和95号汽油有什么区别，可以混着用吗？
这两天看新闻全是关于原油的涨跌,油价跟我们用车也是息息相关的,以前卖车的时候很多客户都不知道车用什么标号的汽油好,又或者本来车型建议加92的汽油问我加95的行不行? 目前供汽车使用的汽油标号有89号. ...
html点击按钮计算两个输入框的和_小程序计算报价功能介绍
一.使用场景用户可在管理后台设置计算值和运算公式,访客输入对应计算值,即可实现自动计算出结果,并提供相关的咨询入口,适用于装修.建材.房贷.车险等行业的报价行为. 二.功能版本限制小程序至尊版可开 ...
编写程序，解决鸡兔同笼问题：一个笼子里关着鸡和兔子。从上面数有35个头，从下面数有84只脚。问笼中各有多少只鸡和兔？
#include<stdio.h> int main() {int a,b,x;a=35;b=84;x=-(84-35*4)/2;printf("%d %d",x,35 ...
编写程序输出所有的“水仙花数”。“水仙花数”指一个三位数，其各位数字立方和等于该数本身，例如153是一个“水仙花数”，因为153＝1×1×1＋3×3×3＋5×5×5。
#include <graphics.h> #include <conio.h> #include<stdio.h> int main() { int a, ...
实验七：掌握基本的MapReduce编程方法 (JAVA+Python实现)(编程实现文件合并和去重操作,编写程序实现对输入文件的排序,对给定的表格进行信息挖掘)
一.实验目的: 1. 理解MapReduce的工作机制: 2. 掌握基本的MapReduce编程方法 3. 重点理解map过程,shuffle过程和reduce过程二.实验环境: Hadoop+Ec ...
Java黑皮书课后题第5章：5.26（计算e）下面的数列可以近似计算e，编写程序显示i=10000、20000、30000…100000时值
5.26(计算e)下面的数列可以近似计算e,编写程序显示i=10000.20000.30000-100000时e值题目题目概述代码运算结果题目题目概述 5.26(计算e)下面的数列可以近似 ...
编写程序乘法口诀表C语言,陈广川问:c语言编程九九乘法口诀表怎样用c语言写九九乘法口诀表？...
怎样用c语言写九九乘法口诀表? 哈哈,我刚刚用javascript写好乘法口诀表. C语言,如何编写程序输出九九乘法表.形式如下 ********* ******** ******* ****** * ...
2018.4.1(python) 请编写程序将用户输入华氏度转换为摄氏度，或将输入的摄氏度转换为华氏度。 //（米和英寸之间的长度转换）//热量转换
温度的刻画有两个不同体系:摄氏度(Celsius)和华氏度(Fabrenheit). 请编写程序将用户输入华氏度转换为摄氏度,或将输入的摄氏度转换为华氏度. 转换算法如下:(C表示摄氏度.F表示华氏度 ...

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

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

最新文章

热门文章