阅读下列说明、效果图和 HTML 代码,进行网页编程,回答问题 1 至问题 5 。 【说明】 随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页( casher.html ),点击“ + ”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。 项目名称为 casher ,包含收银网页 casher.html 和 js 文件夹,其中, js 文件夹包含 jquery-3.3.1.min.js 文件。 收银网页分为三个区域:上端内容为“标题”和一个不可编辑的“文本框”,“文本框”用来显示结账金额;中间内容为水果商品表格,在表格每一行中,点击一次“ + ”按,则添加一份,点击多次,则添加多份;下端内容为“结帐”和“完成交易”按。 【效果图】 ( 1 )收银网页 casher.html 效果如图 所示。 ( 2 )在表格每一行中,点击水果名称后的“ + ”按,则将该水果的价格显示到上方的“文本框”中。若购买多份水果时,每份水果的价格之间使用“ + ”连接,如图 所示。 ( 3 )点击“结帐”按,将“文本框”中价格进行计算,设置“文本框”显示内容为“总金额 :xxx ”;将“结帐”按设置为“禁用”;使用 jQuery 动画,将中间的表格透明度设为“ 0.3 ”,动画持续时间为“ 1s ”。如图 所示。 ( 4 )点击“交易完成”按,重新加载网页,恢复到网页的初始状态。 【代码:收银网页 casher.html 】 社区便利店收银系统 body{ text-align:center; font-size:13px; } table{ margin:10px auto; } #result{ width:245px; height:40px; } 社区便利店收银系统 名称 价格 添加 山东苹果 ¥ 13.5/ 份 新奇士橙 ¥ 12.5/ 份 麒麟瓜 ¥ 3.0/ 份 国产红提 ¥ 10.5/ 份 进口香蕉 ¥ 4.5/ 份 结 帐 " id="btn_checkout" onclick="checkoutClick()" /> 交易完成 " onclick="reloadClick()" /> /* 功能:使用 Javascript 编写代码,点击“ + ”按触发,修改“文本框”值为购买的水果价格,多次点击,以“ + ”连接各价格 参数: price 为添加水果的价格 返回:无 编写代码提示: ( 1 )获得“文本框 result ”值 ( 2 )判断“文本框 result ”值是否为 ”” : ( 3 )若为 ”” ,则将当前 price 赋值给“文本框” ( 4 )若不为 "" ,则先在“文本框”已有值后添加一个“ + ”,再添加此次价格 price */ function addClick(price) { // 编写代码 __________(1)___________________________________ } /* 功能:使用 Javascript 编写代码,点击“结账”按触发,计算所购水果的总金额,并将结果显示在“文本框” result 上。 参数:无 返回:无 编写代码提示: ( 1 )获得“文本框 result ”值 ( 2 )使用“ + ”分隔出“文本框 result ”值中每一个价格,存放到 Array 对象中 ( 3 )使用 for 循环遍历数组对象,将每个价格相加得到总金额 ( 4 )设置“文本框 result ”值为“总金额 :xxx ” ( 5 )调用 disabledBtn() 函数禁用“结帐”按 ( 6 )调用 transparency() 函数设置水果商品表格的透明度 */ function checkoutClick() { // 编写代码 ___________ _(2) ________________________________ } /* 功能:使用 jQuery 库编写代码,将“结帐”按设为禁用 参数:无 返回:无 */ function disabledBtn() { // 编写代码 _____________ _(3) ______________________________ } /* 功能:使用 jQuery 库编写代码,将水果商品表格透明度设为 0.3 ,动画持续时间为 1s 参数:无 返回:无 编写代码提示:使用 jQuery 的动画函数实现。 */ function transparency() { // 编写代码 _____________ _(4) _____________________________ } /* 功能:点击“交易完成”按触发,重新加载当前页面,初始页面状态 参数:无 返回:无 */ function reloadClick() { // 编写代码 _______________ _(5) ____________________________ }