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

相关文章

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

Spring Cloud Hystrix原理与注意事项小结

《SpringCloudHystrix原理与注意事项小结》本文介绍了Hystrix的基本概念、工作原理以及其在实际开发中的应用方式,通过对Hystrix的深入学习,开发者可以在分布式系统中实现精细... 目录一、Spring Cloud Hystrix概述和设计目标(一)Spring Cloud Hystr

Spring Boot整合消息队列RabbitMQ的实现示例

《SpringBoot整合消息队列RabbitMQ的实现示例》本文主要介绍了SpringBoot整合消息队列RabbitMQ的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目录RabbitMQ 简介与安装1. RabbitMQ 简介2. RabbitMQ 安装Spring

springMVC返回Http响应的实现

《springMVC返回Http响应的实现》本文主要介绍了在SpringBoot中使用@Controller、@ResponseBody和@RestController注解进行HTTP响应返回的方法,... 目录一、返回页面二、@Controller和@ResponseBody与RestController

JAVA集成本地部署的DeepSeek的图文教程

《JAVA集成本地部署的DeepSeek的图文教程》本文主要介绍了JAVA集成本地部署的DeepSeek的图文教程,包含配置环境变量及下载DeepSeek-R1模型并启动,具有一定的参考价值,感兴趣的... 目录一、下载部署DeepSeek1.下载ollama2.下载DeepSeek-R1模型并启动 二、J

springboot rocketmq配置生产者和消息者的步骤

《springbootrocketmq配置生产者和消息者的步骤》本文介绍了如何在SpringBoot中集成RocketMQ,包括添加依赖、配置application.yml、创建生产者和消费者,并展... 目录1. 添加依赖2. 配置application.yml3. 创建生产者4. 创建消费者5. 使用在

Spring Retry 实现乐观锁重试实践记录

《SpringRetry实现乐观锁重试实践记录》本文介绍了在秒杀商品SKU表中使用乐观锁和MybatisPlus配置乐观锁的方法,并分析了测试环境和生产环境的隔离级别对乐观锁的影响,通过简单验证,... 目录一、场景分析 二、简单验证 2.1、可重复读 2.2、读已提交 三、最佳实践 3.1、配置重试模板

Spring中@Lazy注解的使用技巧与实例解析

《Spring中@Lazy注解的使用技巧与实例解析》@Lazy注解在Spring框架中用于延迟Bean的初始化,优化应用启动性能,它不仅适用于@Bean和@Component,还可以用于注入点,通过将... 目录一、@Lazy注解的作用(一)延迟Bean的初始化(二)与@Autowired结合使用二、实例解

SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)

《SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)》本文介绍了如何在SpringBoot项目中使用Jasypt对application.yml文件中的敏感信息(如数... 目录SpringBoot使用Jasypt对YML文件配置内容进行加密(例:数据库密码加密)前言一、J