0
0

使用JavaScript的效果实现输入相关信息计算票价的效果

前段时间家中有事，断更的会一点点补上

首先这是我们的需求

1.首先我们先创建一个html文件

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         
  9.     </body>
  10. </html>

2.然后我们开始写js部分代码，先定义三个变量（这里加入Number是把字符型转成数字型）

  1. <script>
  2.             var sum = prompt('请输入你要购买的票种类')
  3.             var ages = prompt('请输入你的年龄')
  4.             var height = prompt('请输入身高')
  5.             height = Number(height)
  6.             ages = Number(ages)
  7.             
  8. </script>

3.接下来我们根据需求继续添加变量

  2.         <script>
  3.             var sum = prompt('请输入你要购买的票种类')
  4.             var ages = prompt('请输入你的年龄')
  5.             var height = prompt('请输入身高')
  6.             height = Number(height)
  7.             ages = Number(ages)
  8.             // console.log(ages)
  9.             var sum1 = '硬座'
  10.             var sums = '硬卧'
  11.         </script>
  12.

4.接下来我们通过if条件语句来实现条件

1.因为这里需求是让我们先选择座位的类型，所以我们要先判断是使用者输入的是什么座

  1. <script>
  2.             var sum = prompt('请输入你要购买的票种类')
  3.             var ages = prompt('请输入你的年龄')
  4.             var height = prompt('请输入身高')
  5.             height = Number(height)
  6.             ages = Number(ages)
  7.             // console.log(ages)
  8.             var sum1 = '硬座'
  9.             var sums = '硬卧'
  10.         
  11.             if (sum == sum1) {
  13.                }else{
  14.             }
  15. </script>

2.接下来我们开始正式开始，我们开始写根据年龄来影响价格的部分（以硬座的的为例子）

  1.     
  2.         <script>
  3.             var sum = prompt('请输入你要购买的票种类')
  4.             var ages = prompt('请输入你的年龄')
  5.             var height = prompt('请输入身高')
  6.             height = Number(height)
  7.             ages = Number(ages)
  8.             // console.log(ages)
  9.             var sum1 = '硬座'
  10.             var sums = '硬卧'
  11.         
  12.             if (sum == sum1) {
  13.                 if (ages >= 18) {
  14.                     alert('你的票价是100元')
  15.                 } else {
  16.                     
  17.                 }
  18.         </script>

这样我们就做到了判断当输入的年龄大于18和小于18的价格。，当然此时小于18的部分由于需求还有一个条件是身高，所以我们要在else里再次套入一个if循环

3.接下来加入身高判断条件

由需求可知，在120，120-150，150以上这三个区间的价格是不一样的，所以我们要以此为条件，在else里添加嵌套一个if判断.

  1.     
  2.         <script>
  3.             var sum = prompt('请输入你要购买的票种类')
  4.             var ages = prompt('请输入你的年龄')
  5.             var height = prompt('请输入身高')
  6.             height = Number(height)
  7.             ages = Number(ages)
  8.             // console.log(ages)
  9.             var sum1 = '硬座'
  10.             var sums = '硬卧'
  11.         
  12.             if (sum == sum1) {
  13.                 if (ages >= 18) {
  14.                     alert('你的票价是100元')
  15.                 } else {
  16.                     if (height < 120) {
  17.                         alert('你无需付款，免票')
  18.                     } else if (height < 150 && height >= 120) {
  19.                         alert('你的票价是50元')
  20.                     } else {
  21.                         alert('你的票价是100元')
  22.                     }
  23.                 }
  24.             } 
  25.             
  26.         </script>
  1.                                                     小提示：由于嵌套了一个if，所以大家在写的时候注意花括号哦

4.接下来就很简单了，硬座的写出来了，我们只需稍加改动，未成年人购买硬卧只能是减去硬座的一半哦

  1.     
  2.         <script>
  3.             var sum = prompt('请输入你要购买的票种类')
  4.             var ages = prompt('请输入你的年龄')
  5.             var height = prompt('请输入身高')
  6.             height = Number(height)
  7.             ages = Number(ages)
  8.             // console.log(ages)
  9.             var sum1 = '硬座'
  10.             var sums = '硬卧'
  11.         
  12.         
  13.              if (sum == sums) {
  14.                 if (ages >= 18) {
  15.                     alert('你的票价是190元')
  16.                 } else {
  17.                     if (height < 120) {
  18.                         alert('你无需付款，免票')
  19.                     } else if (height < 150 && height >= 120) {
  20.                         alert('你的票价是140元')
  21.                     } else {
  22.                         alert('你的票价是190元')
  23.                     }
  24.                 }
  25.                 }
  26.         </script>

5.接下来我们综合一下

  1.     
  2.         <script>
  3.             var sum = prompt('请输入你要购买的票种类')
  4.             var ages = prompt('请输入你的年龄')
  5.             var height = prompt('请输入身高')
  6.             height = Number(height)
  7.             ages = Number(ages)
  8.             // console.log(ages)
  9.             var sum1 = '硬座'
  10.             var sums = '硬卧'
  11.         
  12.             if (sum == sum1) {
  13.                 if (ages >= 18) {
  14.                     alert('你的票价是100元')
  15.                 } else {
  16.                     if (height < 120) {
  17.                         alert('你无需付款，免票')
  18.                     } else if (height < 150 && height >= 120) {
  19.                         alert('你的票价是50元')
  20.                     } else {
  21.                         alert('你的票价是100元')
  22.                     }
  23.                 }
  24.             } 
  25.              if (sum == sums) {
  26.                 if (ages >= 18) {
  27.                     alert('你的票价是190元')
  28.                 } else {
  29.                     if (height < 120) {
  30.                         alert('你无需付款，免票')
  31.                     } else if (height < 150 && height >= 120) {
  32.                         alert('你的票价是140元')
  33.                     } else {
  34.                         alert('你的票价是190元')
  35.                     }
  36.                 }
  37.                 }
  38.         </script>
  1.                                                                                                         这样整个判断条件就写出来了

5.这是完整代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.     <script>
  9.             var sum = prompt('请输入你要购买的票种类')
  10.             var ages = prompt('请输入你的年龄')
  11.             var height = prompt('请输入身高')
  12.             height = Number(height)
  13.             ages = Number(ages)
  14.             // console.log(ages)
  15.             var sum1 = '硬座'
  16.             var sums = '硬卧'
  17.         
  18.             if (sum == sum1) {
  19.                 if (ages >= 18) {
  20.                     alert('你的票价是100元')
  21.                 } else {
  22.                     if (height < 120) {
  23.                         alert('你无需付款，免票')
  24.                     } else if (height < 150 && height >= 120) {
  25.                         alert('你的票价是50元')
  26.                     } else {
  27.                         alert('你的票价是100元')
  28.                     }
  29.                 }
  30.             } 
  31.              if (sum == sums) {
  32.                 if (ages >= 18) {
  33.                     alert('你的票价是190元')
  34.                 } else {
  35.                     if (height < 120) {
  36.                         alert('你无需付款，免票')
  37.                     } else if (height < 150 && height >= 120) {
  38.                         alert('你的票价是140元')
  39.                     } else {
  40.                         alert('你的票价是190元')
  41.                     }
  42.                 }
  43.                 }
  44.         </script>
  45.     </body>
  46. </html>
标签： javascript 前端 css3
本文转载自: https://blog.csdn.net/tea_tea_/article/details/125711775
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。
登录后发布评论

“使用JavaScript的效果实现输入相关信息计算票价的效果”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？