软件开发定制定制JavaScript、jQuery实现“社区便利店收银系统”(1+X Web前端开发初级 例题)

文章目录

📄题目要求

软件开发定制定制阅读下列说明、效果图和HTML代码，软件开发定制定制进行网页编程，回答问题1至问题5。

🔗说明

软件开发定制定制随着个性化服务发展，学校、街边、软件开发定制定制社区等都流行将水果等商品洗净、切好，并装盒，按份出售。软件开发定制定制现开发一个“软件开发定制定制社区便利店收银系统”，软件开发定制定制店中每天提供固定种类的水果，装盒后，软件开发定制定制标记每一份价格，软件开发定制定制按份进行销售。在系统中，软件开发定制定制打开收银网页（casher.html），点击“+”软件开发定制定制添加销售水果，点击“结账”软件开发定制定制进行购买水果结算，点击“完成交易”软件开发定制定制进行下一个新用户购买。

项目名称为casher，包含收银网页casher.html和js文件夹，其中，js文件夹包含jquery-3.3.1.min.js文件。

收银网页分为三个区域：上端内容为“标题”和一个不可编辑的“文本框”，“文本框”用来显示结账金额；中间内容为水果商品表格，在表格每一行中，点击一次“+”按钮，则添加一份，点击多次，则添加多份；下端内容为“结帐”和“完成交易”按钮。

🔗效果图

（1）收银网页casher.html效果如图3-1所示。

图3-1 初始化状态

（2）在表格每一行中，点击水果名称后的“+”按钮，则将该水果的价格显示到上方的“文本框”中。若购买多份水果时，每份水果的价格之间使用“+”连接，如图3-2所示。

图3-2 添加水果

（3）点击“结帐”按钮，将“文本框”中价格进行计算，设置“文本框”显示内容为“总金额:xxx”；将“结帐”按钮设置为“禁用”；使用jQuery动画，将中间的表格透明度设为“0.3”，动画持续时间为“1s”。如图3-3所示。

图3-3 结帐

（4）点击“交易完成”按钮，重新加载网页，恢复到网页的初始状态。

🧩题目代码如下 

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  6.     <title>社区便利店收银系统</title>
  7.     <style>
  8.       body{
  9. 		 text-align:center;
  10. 		 font-size:13px;
  11. 	  }
  12. 	  table{
  13. 		margin:10px auto;
  14. 	  } 
  15. 	  #result{
  16. 		width:245px;
  17. 		height:40px;
  18. 	  }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <h2>社区便利店收银系统</h2>
  23.     <input type="text" value="" id="result" disabled="disabled" />
  24.     <table border="1" width="250px">
  25.       <tr>
  26.         <th>名称</td>
  27.         <th>价格</td>
  28.         <th>添加</td>
  29.       </tr>
  30.       <tr>
  31.         <td>山东苹果</td>
  32.         <td>￥13.5/份</td>
  33.         <td><input type="button" value="+" onclick="addClick(13.5)" /></td>
  34.       </tr>
  35.       <tr>
  36.         <td>新奇士橙</td>
  37.         <td>￥12.5/份</td>
  38.         <td><input type="button" value="+" onclick="addClick(12.5)" /></td>
  39.       </tr>
  40.       <tr>
  41.         <td>麒麟瓜</td>
  42.         <td>￥3.0/份</td>
  43.         <td><input type="button" value="+" onclick="addClick(3.0)" /></td>
  44.       </tr>
  45.       <tr>
  46.         <td>国产红提</td>
  47.         <td>￥10.5/份</td>
  48.         <td><input type="button" value="+" onclick="addClick(10.5)" /></td>
  49.       </tr>
  50.       <tr>
  51.         <td>进口香蕉</td>
  52.         <td>￥4.5/份</td>
  53.         <td><input type="button" value="+" onclick="addClick(4.5)" /></td>
  54.       </tr>
  55.     </table>
  56.     <input class="btn" type="button" value="结 帐" id="btn_checkout" onclick="checkoutClick()" />
  57.     &nbsp;&nbsp;&nbsp;
  58.     <input class="btn" type="button" value="交易完成" onclick="reloadClick()" />
  59.     <script>
  60.       /*
  61.       功能：使用Javascript编写代码，点击“+”按钮触发，修改“文本框”值为购买的水果价格，多次点击，以“+”连接各价格
  62.       参数：price 为添加水果的价格
  63.       返回：无
  64.       编写代码提示：
  65.            （1）获得“文本框result”值
  66.            （2）判断“文本框result”值是否为””：
  67.            （3）若为””，则将当前price赋值给“文本框”
  68.            （4）若不为""，则先在“文本框”已有值后添加一个“+”，再添加此次价格price      
  69. */
  70.       function addClick(price) {
  71.         // 编写代码
  72.    
  73.       }
  74.       /*
  75.       功能：使用Javascript编写代码，点击“结账”按钮触发，计算所购水果的总金额，并将结果显示在“文本框”result上。
  76.       参数：无
  77.       返回：无
  78.       编写代码提示：
  79.            （1）获得“文本框result”值
  80.            （2）使用“+”分隔出“文本框result”值中每一个价格，存放到Array对象中
  81.            （3）使用for循环遍历数组对象，将每个价格相加得到总金额
  82.            （4）设置“文本框result”值为“总金额:xxx”
  83.            （5）调用disabledBtn()函数禁用“结帐”按钮
  84.            （6）调用transparency()函数设置水果商品表格的透明度
  85.       */
  86.       function checkoutClick() {
  87.         // 编写代码
  88.       }
  89.       /*
  90.       功能：使用jQuery库编写代码，将“结帐”按钮设为禁用
  91.       参数：无
  92.       返回：无
  93.       */
  94.       function disabledBtn() {
  95.         // 编写代码
  96.       }
  97.       /*
  98.       功能：使用jQuery库编写代码，将水果商品表格透明度设为0.3，动画持续时间为1s
  99.       参数：无
  100.       返回：无
  101.       编写代码提示：使用jQuery的动画函数实现。
  102.       */
  103.       function transparency() {
  104.         // 编写代码
  105.       }
  106.       /*
  107.       功能：点击“交易完成”按钮触发，重新加载当前页面，初始页面状态
  108.       参数：无
  109.       返回：无
  110.       */
  111.       function reloadClick() {
  112.         // 编写代码
  113.     Window.loaction.reloda();
  114.       }
  115.     </script>
  116.   </body>
  117. </html>

❓问题如下

❗❗❗看到题目，我可以发现这道题目的考法不同于之前的考法，不是补充填写代码空，而是补充代码的功能块，所以看清上下代码之间的联系和题目给出的提示。

①【问题1】（7分）

使用JavaScript编写addClick()函数，并调试运行，满足功能要求。

  1.       /*
  2.       功能：使用Javascript编写代码，点击“+”按钮触发，修改“文本框”值为购买的水果价格，多次点击，以“+”连接各价格
  3.       参数：price 为添加水果的价格
  4.       返回：无
  5.       编写代码提示：
  6.            （1）获得“文本框result”值
  7.            （2）判断“文本框result”值是否为””：
  8.            （3）若为””，则将当前price赋值给“文本框”
  9.            （4）若不为""，则先在“文本框”已有值后添加一个“+”，再添加此次价格price      
  10. 	 */
  11.       function addClick(price) {
  12.         var result =document.getElementById('result').value;
  13.         if(result==""){
  14.           document.getElementById('result').value=price;
  15.         }else{
  16.           document.getElementById('result').value=result+"+"+price;
  17.             }
  18.          }
  19.       }

📚分析

获得“文本框result”值，通过DOM来获取

document.getElementById('填写id名');

用if-else语句判断price的值

②【问题2】（10分）

使用JavaScript编写checkoutClick()函数，并调试运行，满足功能要求。

  1.       /*
  2.       功能：使用Javascript编写代码，点击“结账”按钮触发，计算所购水果的总金额，并将结果显示在“文本框”result上。
  3.       参数：无
  4.       返回：无
  5.       编写代码提示：
  6.            （1）获得“文本框result”值
  7.            （2）使用“+”分隔出“文本框result”值中每一个价格，存放到Array对象中
  8.            （3）使用for循环遍历数组对象，将每个价格相加得到总金额
  9.            （4）设置“文本框result”值为“总金额:xxx”
  10.            （5）调用disabledBtn()函数禁用“结帐”按钮
  11.            （6）调用transparency()函数设置水果商品表格的透明度
  12.       */
  13.       function checkoutClick() {
  14.         var result = document.getElementById("result").value;
  15.         if (result == "") {
  16.               return;
  17.             }
  18.         var prices = result.split("+");
  19.         var total = 0.0;
  20.         for (var idx = 0; idx < prices.length; idx++) {
  21.               total += parseFloat(prices[idx]);
  22.             }
  23.         document.getElementById("result").value = "总金额:" + total;
  24.         disabledBtn();
  25.         transparency();
  26.        }

📚分析

获得“文本框result”值，通过DOM来获取

document.getElementById('填写id名');

需要分隔result的值，然后存放到数组里面由此可以知道使用split()方法

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

语法

stringObject.split(separator,howmany)
参数描述
separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

例子

在本例中，我们将按照不同的方式来分割字符串：

  1. var str="How are you doing today?"
  2.  
  3. document.write(str.split(" ") + "<br />")
  4.  
  5. document.write(str.split("") + "<br />")
  6.  
  7. document.write(str.split(" ",3))
  8.

输出：

  1. How,are,you,doing,today?
  2.  
  3. H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
  4.  
  5. How,are,you

多学一招

JavaScript Array join() 方法

定义和用法

join()方法将数组作为字符串返回。

元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

指定的分隔符分隔 这样写如用*号分隔 join('*')。

注释：join()方法不会改变原始数组。

例子

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>join() 方法将数组作为字符串返回。</h1>
  5. <p id="demo"></p>
  6. <script>
  7. const fruits = ["Banana", "Orange", "Apple", "Mango"];
  8. document.getElementById("demo").innerHTML = fruits.join('*');
  9. </script>
  10. </body>
  11. </html>

 输出：

③【问题3】（5分）

使用jQuery编写disabledBtn()函数，并调试运行，满足功能要求。

  1. /*
  2.       功能：使用jQuery库编写代码，将“结帐”按钮设为禁用
  3.       参数：无
  4.       返回：无
  5.       */
  6.       function disabledBtn() {
  7.         $("#btn_checkout").attr("disabled", "disabled");
  8.       }

📚分析

首先题目要求用jq来编写，所以不用js的DOM写法来获取元素，因此用$("#btn_checkout")来获取到这个id。

将按钮设置为禁用，用到disabled属性，禁用 input 元素。

通过jq的attr() 方法来设置或返回被选元素的属性值。

返回属性值

返回被选元素的属性值。

语法

$(selector).attr(attribute)
参数描述
attribute规定要获取其值的属性。

④【问题4】（5分）

使用jQuery编写transparency()函数，并调试运行，满足功能要求。

  1. /*
  2.       功能：使用jQuery库编写代码，将水果商品表格的透明度设为0.3，动画持续时间为1s
  3.       参数：无
  4.       返回：无
  5.       编写代码提示：使用jQuery的动画函数实现。
  6.       */
  7.       function transparency() {
  8.         $("table").animate(
  9.           {opacity: '0.3'},1000
  10.         );
  11.       }

📚分析

jQuery 动画效果 - () 方法

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

⑤【问题5】（3分）

编写reloadClick()函数，并调试运行，满足功能要求。

  1.  /*
  2.       功能：点击“交易完成”按钮触发，重新加载当前页面，初始页面状态
  3.       参数：无
  4.       返回：无
  5.       */
  6.       function reloadClick() {
  7.         window.location.reload();
  8.       }

📚分析

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。

定义和用法

reload()方法用于刷新当前文档。

reload() 方法类似于你浏览器上的刷新页面按钮。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

🎯实现效果

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发