云南农职《JavaScript交互式网页设计》综合机试试卷①——实现购物车的结算

港控/mmm° 2022-12-23 11:15 16阅读 0赞

## **一、语言和环境** ##

1.  实现语言：javascript、html、css。
2.  开发环境：HBuilder。

## **二、题目2**（100分） ##

**1、功能需求：**

马上过节了，电商网站要进行促销活动，需要实现该商城购物车的商品数量的增加和删除效果，要求单项价格和小计以及总金额随商品数量的变化而变化，具体规则如下：

（1）购买总金额达到或超过1000，按8折优惠；

（2）购买总金额达到或超过700，但未达到1000，按8.5折优惠；

（3）购买总金额达到或超过300，但未达到700，按9折优惠；

（4）购买总金额小于300，按9.8折优惠；

编写代码程序，实现商品总金额和实际支付金以及单项小计额随商品数量的变化而变化；效果如图1所示：

![20201124195344546.png][] 图1   运行效果截图

**2、推荐实现步骤**

1.  在HBuilder上实现web项目的新建，命名为shoppingCar。
2.  根据效果图实现页面的编写。
3.  使用js或jQuery实现商品数量的增加和减少（最少为1）根据单价计算小计。
4.  使用js或jQuery根据商品数量的改变实现商品总金额的改变和单项小计的改变。
5.  根据优惠活动规则，使用多重if结构实现各种分支的计算，作为实际支付金额。

## 三**、评分标准:** ##

<table style="width:371.4pt;"> 
 <tbody> 
 <tr> 
 <td colspan="4" style="width:371.4pt;"> 题目：购物车结算管理 </td> 
 </tr> 
 <tr> 
 <td colspan="4" style="width:371.4pt;"> 该程序评分标准如下： </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 20 </td> 
 <td colspan="3" style="width:346.1pt;"> 项目搭建和代码结构是否正确 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 5 </td> 
 <td style="width:302.1pt;"> 项目正确搭建 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 5 </td> 
 <td style="width:302.1pt;"> 正确按要求定义变量（变量的命名） </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 合理的项目名称及相关页面和css、js的命名及代码规范 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 20 </td> 
 <td colspan="3" style="width:346.1pt;"> 根据总金额计算实际支付结果 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 正确使用多重if判断并计算相应结果 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 显示结果 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 20 </td> 
 <td colspan="3" style="width:346.1pt;"> 实现对应的静态页面 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 代码结构合理 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 实现页面80%的相似性 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 40 </td> 
 <td colspan="3" style="width:346.1pt;"> 总体编程技术 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td style="width:43.4pt;"> 5 </td> 
 <td colspan="2" style="width:302.7pt;"> 程序逻辑分明，有一定注释 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td style="width:43.4pt;"> 5 </td> 
 <td colspan="2" style="width:302.7pt;"> 变量命名符合规范，可读性好，编码书写有缩进 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td style="width:43.4pt;"> 30 </td> 
 <td colspan="2" style="width:302.7pt;"> 按照要求使用js或jQuery完成要求的效果 </td> 
 </tr> 
 <tr> 
 <td colspan="3" style="width:69.3pt;"> 总分 </td> 
 <td style="width:302.1pt;"> 100分 </td> 
 </tr> 
 </tbody> 
</table>

## 四、实现代码 ##

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<style type="text/css">
 			table{
 				border: 1px solid #dedede;
 				border-collapse: collapse;
 				width: 100%;
 			}
 			table tr{
 				height: 50px;
 				border-bottom: 1px dashed #DEDEDE;
 			}
 			table td,th{
 				text-align: center;
 				vertical-align: middle;
 			}
 			table td.item{
 				width: 400px;
 				height: 60px;
 				text-align: left;
 			}
 			table td.item img{
 				margin-right: 10px;
 				vertical-align: middle;
 			}
 			table tr td.cal{
 				text-align: right;
 			}
 			table tr td.cal span{
 				font: bold 25px geneva,verdana,sans-serif;
 				color: orange;
 			}
 			table .btn{
 				border: 1px solid #dedede;
 				background-color: white;
 				width: 16px;
 				height: 16px;
 			}
 			table .txt{
 				width: 60px;
 				height: 30px;
 				border: 1px solid #dedede;
 				text-align: center;
 				font: bold 15px/30px geneva,verdana,sans-serif;
 			}
 			table .txt:hover{
 				border: 1px solid red;
 			}
 		</style>
 		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
 		<script type="text/javascript">
 			$(function(){
 				//在增加数量的按钮上绑定单击事件
 				$(".btnAdd").click(function(){
 					var txtObj = $(this).siblings("input[type='text']");//获取输入框
 					// console.log(txtObj);
 					var number = parseInt(txtObj.val());
 					txtObj.val(number+1);
 					//计算单个商品价格
 					calPrice($(this),number+1);
 					//计算商品总价
 					calTotalPrice();
 				});
 						
 				//在减少的数量的按钮上绑定单击事件
 				$(".btnMinus").click(function(){
 					var txtObj = $(this).siblings("input[type='text']");//获取输入框
 					var number = parseInt(txtObj.val());
 					if(number>1){
 						txtObj.val(number-1);
 						//计算单个商品价格
 						calPrice($(this),number-1);
 						//计算商品总价
 						calTotalPrice();
 					};
 				})
 				//参数$btnObj代表增减数量的按钮，number是商品的数量
 				function calPrice($btnObj,number){
 					var $tdObj = $btnObj.parent().next(); //获取显示商品单价的td单元格
 					var price = parseFloat($tdObj.text().substr(1));//从￥截取，获取单价
 					var $tdTotal = $tdObj.next();//获取紧邻的同胞元素，即显示商品小计的单元格
 					var total = price*number;//计算单个商品价格
 					$($tdTotal).html("¥"+total.toFixed(2));//商品小计保留小数点后两位
 				}
 				//计算商品列表中所有商品的总价
 				function calTotalPrice(){
 					//保存总价
 					var sum = 0;
 					//遍历表格中title='price'属性的单元格
 					$("td[title='price']").each(function(index,element){
 						sum += parseFloat($(this).text().substr(1));//价格累加
 					});
 					$("#spanTotal").html("¥" + sum.toFixed(2));
 					if (sum.toFixed(2)>=1000) {
 						total=sum.toFixed(2)*0.8
 					} else if(sum.toFixed(2)>=700 && 1000>sum.toFixed(2)) {
 						total=sum.toFixed(2)*0.85
 					}else if(sum.toFixed(2)>=300 && 700>sum.toFixed(2)) {
 						total=sum.toFixed(2)*0.9
 					}else if(300>sum.toFixed(2)) {
 						total=sum.toFixed(2)*0.95
 					}
 					//显示总价
 					$("#spanTotal2").html("¥" + total)
 					$("#spanTotal2").html("¥" + total.toFixed(2));
 				}
 			});
 		</script>
 	</head>
 	<body>
 		<table id="tabOrder">
 			<th>项目</th>
 			<th>状态</th>
 			<th>类型、数量</th>
 			<th>单价</th>
 			<th>小计</th>
 			<tr>
 				<td class="item">
 					<a href="#">
 						<img src="img/img_1.jpg" align="left" width="100px"/>
 						欢乐空间量版式KTV：欢唱套餐2选1，国家法定节假日需到店另付20元，可升级
 					</a>
 				</td>
 				<td>可购买</td>
 				<td>
 					<input type="button" value="-" class="btnMinus"/>
 					<input type="text" class="text1" value="1" disabled="disabled"/>
 					<input type="button" value="+" class="btnAdd"/>
 				</td>
 				<td>¥39.9</td>
 				<td title="price">¥39.9</td>
 			</tr>
 			<tr>
 				<td class="item">
 					<a href="#">
 						<img src="img/img_2.jpg" align="left" width="100px"/>
 						途乐时尚主题量版式KTV，任选1小时欢唱可升级，提供免费WiFi
 					</a>
 				</td>
 				<td>可购买</td>
 				<td>
 					<input type="button" value="-" class="btnMinus"/>
 					<input type="text" class="text2" value="1" disabled="disabled"/>
 					<input type="button" value="+" class="btnAdd"/>
 				</td>
 				<td>¥59.9</td>
 				<td title="price">¥59.9</td>
 			</tr>
 			<tr >
 				<td colspan="5" class="cal">
 					应付金额：¥99.8
 					 商品实际支付金额：¥
 				</td>
 			</tr>
 		</table>
 	</body>
 </html>

[20201124195344546.png]: /images/20221120/b60f6ad6ccc4416fad6666ca72879d22.png