加油优惠价格计算-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

本文主要是介绍加油优惠价格计算-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【案例2-2】 加油优惠价格计算

一、案例描述

  1. 考核知识点

if 、 if…else 、if…else if…else

  1. 练习目标
  • 掌握if单分支语句。
  • 掌握if…else双分支语句
  • 掌握if…else if…else多分支语句
  1. 需求分析

加油站,为了鼓励车主多加油,实行多加多优惠政策,具体优惠如下:

  • 已知92号汽油,每升6元;如果大于等于20升,那么每升5.9;
  • 已知97号汽油,每升7元;如果大于等于40升,那么每升6.5
  • 编写JS程序,用户输入自己的汽油编号,然后输入自己加多少升,弹出价格
  1. 案例分析
  1. 效果如图2-2、2-3、2-4所示。

 

  1. 输入汽油编号

 

  1. 输入油量

 

  1. 页面输出单价和总价钱

  1. 具体实现步骤如下:
  1. 输入汽油编号。
  2. 输入想要加的油量。
  3. 根据编号和油量来规定单价、计算总价
  4. 页面中输出单价和总价钱

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>加油优惠价格计算</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.         var number = prompt("请输入汽油编号");
  10.         var liters = prompt("请输入你要加多少升");
  11.         if(number == "92"){
  12.            if(liters >= 20){
  13.                document.write('汽油5.9元一升;'+ '<br/>' +'共计:'+ (5.9*liters)+'');
  14.            }
  15.            else {
  16.                document.write('汽油6元一升;'+ '<br/>' +'共计:'+ (6*liters)+'');
  17.            }
  18.         }
  19.         else if(number == "97")  {
  20.            if(liters >= 40) {
  21.                document.write('汽油6.5元一升;'+ '<br/>' +'共计:'+ (6.5*liters)+'');
  22.            }
  23.            else {
  24.                document.write('汽油7元一升;'+ '<br/>' +'共计:'+ (7*liters)+'');
  25.            }
  26.         }
  27.         else {
  28.            alert("您输入的汽油我没见过");
  29.         }
  30.         </script>
  31.     </body>
  32. </html>

保存后,在谷歌浏览器中预览,效果如图2-2、2-3、2-4所示。

这篇关于加油优惠价格计算-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/288850

相关文章

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

Java中Integer128陷阱

《Java中Integer128陷阱》本文主要介绍了Java中Integer与int的区别及装箱拆箱机制,重点指出-128至127范围内的Integer值会复用缓存对象,导致==比较结果为true,下... 目录一、Integer和int的联系1.1 Integer和int的区别1.2 Integer和in