云南农职《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 使 ...
随机推荐
- MYSQL获取更新行的主键ID 【转】
在某些情况下我们需要向数据表中更新一条记录的状态,然后再把它取出来,但这时如果你在更新前并没有一个确认惟一记录的主键就没有办法知道哪条记录被更新了. 举例说明下: 有一个发放新手卡的程序,设计数据库时 ...
- C++ 写出这个数
题目如下: 读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 1. 输出格式: 在一行内 ...
- Linux 网卡配置文件，命令详细设置
1.配置文件/etc/hosts(本地主机ip地址映射,可以有多个别名)./etc/services(端口号与标准服务之间的对应关系)./etc/sysconfig/network(设置主机名,网关, ...
- 3.0 go mod之远程仓库搭建-代码示例
注意事项 所谓的远程仓库指的是github,个人首次使用go mod在其他云仓库上尝试,并未成功,这浪费了我近2小时的时间: 如果你是初次尝试,那么除了github的地址换一下之外,其他的都按照示例操 ...
- Spring Batch Event Listeners
Learn to create and configure Spring batch's JobExecutionListener (before and after job), StepExecut ...
- Spring Boot 和 Spring Cloud Feign调用服务及传递参数踩坑记录
背景 :在Spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.我们可以使用JDK原生的URLConnectio ...
- Redis集群断电恢复
再集群整体断点或关闭后,默认启动集群后,会成为孤立的单点,需要删除每个节点的pid文件,node.conf.并将RDB和AOF文件移动出来,再挨个启动每个节点,并用create创建集群脚本,重新创建集 ...
- NTLM验证过程
中我们介绍Kerberos认证的整个流程.在允许的环境下,Kerberos是首选的认证方式.在这之前,Windows主要采用另一种认证协议 --NTLM(NT Lan Manager).NTLM使用在 ...
- get_started_3dsctf_2016 1
拿到题目,依旧还是老样子,查看程序开启的保护和位数 可以看到程序开启了nx保护是32位程序,于是我们把程序放入ida32编译一下 一打开就能看到非常明显的get_flag这个程序,f5观察伪代码 当a ...
- CF420A Start Up 题解
Content 给定一个长度为 \(n\) 的字符串,求这个字符串整个反转过来后是否和原字符串一样. 数据范围:\(1\leqslant n\leqslant 10^5\). Solution 众所周 ...