云南农职《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("¥"+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">
应付金额：<span id="spanTotal">¥99.8</span>
</span> 商品实际支付金额：<span id="spanTotal2"><b>¥</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 使 ...
随机推荐
- 【STM8】添加头文件、加入库函数
下面顺便放上STM8L15x-16x-05x的固件库,以及固件库里没有的<stm8l15x_conf.h> 链接打开后,还会发现另外两个文件夹,<src><inc> ...
- Bootstrap-table动态表格
在开发中遇到一个需要动态生成table的需求,包括表头和数据.在调试的过程中遇到很多问题,包括数据分页,解决之后记录一下. 如下代码的数据加载流程: ①表头是动态的,在初始化table之前需要调一次后 ...
- jenkins之邮箱设置
- navigationItem的leftBarButtonItem和rightBarButtonItem隐藏
- (void)showEdit { if (不符合显示条件) { self.navigationItem.rightBarButtonItem.customView.hidden = YES; // ...
- redis 之 哨兵
#:编译安装redis4.0 [root@master ~]# tar xf redis-4.0.14.tar.gz [root@master ~]# cd redis-4.0.14/ [root@m ...
- springboot+vue集成mavon-editor，开发在线文档知识库
先睹为快,来看下效果: 技术选型 SpringBoot.Spring Security.Oauth2.Vue-element-admin 集成mavon-editor编辑器 安装 mavon-edit ...
- 最小化安装centos ubuntu基础命令
# yum install vim iotop bc gcc gcc-c++ glibc glibc-devel pcre \ pcre-devel openssl openssl-devel zip ...
- 【Linux】【Services】【Project】Haproxy Keepalived Postfix实现邮件网关Cluster
1. 简介: 1.1. 背景:公司使用exchange服务器作为邮件服务器,但是使用Postfix作为邮件网关实现病毒检测,内容过滤,反垃圾邮件等功能.原来的架构非常简单,只有两台机器,一个负责进公司 ...
- 【Linux】【Commands】systemd
1. 系统启动流程:POST --> Boot Sequeue(BIOS) --> Bootloader(MBR) --> Kernel(ramdisk) --> rootfs ...
- .NET6使用DOCFX自动生成开发文档
本文内容来自我写的开源电子书<WoW C#>,现在正在编写中,可以去WOW-Csharp/学习路径总结.md at master · sogeisetsu/WOW-Csharp (gith ...