云南农职《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 使 ...

随机推荐

高效读取大文件，再也不用担心 OOM 了！
内存读取第一个版本,采用内存读取的方式,所有的数据首先读读取到内存中,程序代码如下: Stopwatch stopwatch = Stopwatch.createStarted(); // 将全部行 ...
Linux基础命令---smbpasswd管理samba密码
smbpasswd smbpasswd指令可以用来修改samba用户的的密码,该指令不仅可以修改本地samba服务器的用户密码,还可以修改远程samba服务器的用户密码. 此命令的适用范围:RedHa ...
Oracle bulk collect into 的几种用法
bulk collect 和 forall 联合应用写起来显得有些啰嗦,不过为了速度,多写两句又何妨建立两个临时表 create table T_TEST ( TESTID NUMBER(19) n ...
Type of 'this' pointer in C++
In C++, this pointer is passed as a hidden argument to all non-static member function calls. The typ ...
Function overloading and return type
In C++ and Java, functions can not be overloaded if they differ only in the return type. For example ...
MySQL批量数据脚本示例
一.建表 # 新建库 create database bigData; use bigData; #1 建表dept CREATE TABLE dept( id INT UNSIGNED PRIMAR ...
Mysql报错合集
目录一.链接报错客户端连接mysql出错链接客户端出错交互登陆mysql出现warning警告Using a password 导入数据到数据库报错ERROR 1050 登陆数据库提示-bas ...
Spring框架源码干货分享之三级缓存和父子工厂
记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea 建议:学习过程中要开着源码一步一步过 Spring中对象的创建宏观 ...
Eclipse切换不同版本的jdk
var会在java1.8中报错,安装10版本以上的jdk可以解决问题,但是安装后Eclipse无法正常工作,后来发现是Eclipse没有切换版本,在网上找了好多教程都是切换系统变量,后来我发现可以直接 ...
uniapp框架如何实现仿微信相册：图视频过滤、相册选择功能
今天我们分享基于uniapp + vue实现仿微信相册插件实例,该插件完全还原了微信相册的功能 1: 相册选择 2: 图片,视频类型过滤 3: 自定义相册界面UI 技术实现开发环境:Hbuilder ...

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

一、语言和环境

二、题目2（100分）

三、评分标准:

四、实现代码

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

随机推荐

热门专题

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

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