云南农职《JavaScript交互式网页设计》综合机试试卷①—

一、语言和环境

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

二、题目2（100分）

1、功能需求：

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

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

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

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

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

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

2、推荐实现步骤

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

三、评分标准:

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

四、实现代码

<!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("&yen;"+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("&yen;" + 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("&yen;" + total)

					$("#spanTotal2").html("&yen;" + 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>&yen;39.9</td>

				<td title="price">&yen;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>&yen;59.9</td>

				<td title="price">&yen;59.9</td>

			</tr>

			<tr >

				<td colspan="5" class="cal">

					应付金额：<span id="spanTotal">&yen;99.8</span>

					</span> 商品实际支付金额：<span id="spanTotal2"><b>&yen;</b></span>

				</td>

			</tr>

		</table>

	</body>

</html>

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

JavaScript交互式网页设计作业目录（作业笔记）
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
JavaScript交互式网页设计笔记 • 【目录】
章节内容实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
云南农职《JavaScript交互式网页设计》综合机试试卷⑤——简单分类菜单
一.语言和环境实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
云南农职《JavaScript交互式网页设计》综合机试试卷③——实现二级分类菜单
一.语言和环境实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用Jquery和JavaScript实现二级分类菜单管理点击 ...
云南农职《JavaScript交互式网页设计》综合机试试卷②——实现轮播图效果
一.语言和环境实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果每隔2秒钟切换一张 ...
云南农职《JavaScript交互式网页设计》综合机试试卷④——蔚蓝网导航栏
一.语言和环境实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目鼠标放到新手入门显示对象的下拉列表鼠标移开 ...
云南农职《JavaScript交互式网页设计》综合机试试卷⑥——简易旅游网
本页面分为顶部导航.登录注册栏,中部图片展示.主体内容和底部反馈模板一.导航栏部分要求一:设置菜单栏(二级菜单)和登录注册模块要求二:当鼠标悬停到菜单栏(一级菜单)时,二级菜单以滑动效果滑出显示 ...
JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...

随机推荐

Python3的类注意事项
参考: https://www.runoob.com/python/python-object.html https://www.runoob.com/w3cnote/python-extends-i ...
写一个简单的AIDL
1.首先创建一个AIDL文件,并添加上两个接口.IMyAidlInterface.aidlpackage com.example.broadcastdemo;// Declare any non-de ...
IT过来人的10点经验谈
1 入行要趁早,正常是22岁本科或25岁硕士毕业入行.如果是零基础经培训班加持的,尽量在28岁前入行,30岁以后再想要入行IT的,千万慎重. 2 IT行业确实能挣大钱,而且能为学历一般学校一般家庭背景 ...
[BUUCTF]REVERSE——xor
xor 附件步骤: 附件很小,直接用ida打开,根据检索得到的字符串,找到程序关键函数程序很简单,一开始让我们输入一个长度为33的字符串给v6,然后v6从第二个字符开始与前一个字符做异或运算,得到 ...
【WP】【web】中学生CTF | web部分wp
$_GET 源码: <?php show_source(__FILE__); include 'config.php'; if(!isset($_GET['args'])){ die(); } ...
Windows10下mysql 8.0.19 安装配置方法图文教程
第一步下载安装包: 官网毕竟是甲骨文公司的产品,去官网下真的慢! 这里有两个供选择的,我建议选第一个(因为我先下了第二个,结果失败了,不知道为什么总是出错.) 下载完自行选择路径解压就可以了. 第 ...
LuoguP7094 [yLOI2020] 金陵谣题解
Content 有 $t$ 组询问,每组询问给定四个整数 $a,b,c,d$,请求出满足 \[\dfrac{a}{x}+\dfrac{b}{c}=\dfrac{d}{y} \] 的正整数对 \ ...
云小课｜DGC数据开发之基础入门篇
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:欢迎来到DGC数据 ...
10-2 bonding
创建bonding设备的配置文件 centos8 /etc/sysconfig/network-scripts/ifcfg-bond0 NAME=bond0 TYPE=bond DEVICE=bond ...
JAVA微信支付——企业付款(企业向微信用户个人付款、转账)
本地开发环境支付回调调试方法可以参考:https://www.cnblogs.com/pxblog/p/11623053.html 需要自行引入相关依赖官方文档地址:https://pay.weix ...

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

一、语言和环境

二、题目2（100分）

三、评分标准:

四、实现代码

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

随机推荐

热门专题

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

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