加油优惠价格计算-课后程序(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

相关文章

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++

springboot+dubbo实现时间轮算法

《springboot+dubbo实现时间轮算法》时间轮是一种高效利用线程资源进行批量化调度的算法,本文主要介绍了springboot+dubbo实现时间轮算法,文中通过示例代码介绍的非常详细,对大家... 目录前言一、参数说明二、具体实现1、HashedwheelTimer2、createWheel3、n

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题:应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案:提前预热各种资源1. Flowable

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进