云南农职《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 使 ...
随机推荐
- 数据库ER图基础概念
ER图分为实体.属性.关系三个核心部分.实体是长方形体现,而属性则是椭圆形,关系为菱形. ER图的实体(entity)即数据模型中的数据对象,例如人.学生.音乐都可以作为一个数据对象,用长方体来表示, ...
- hadoop基本命令（转）
在这篇文章中,我们默认认为Hadoop环境已经由运维人员配置好直接可以使用. 假设Hadoop的安装目录HADOOP_HOME为/home/admin/hadoop. 启动与关闭 启动HADOOP 进 ...
- List如何一边遍历，一边删除？
1.新手常犯的错误 可能很多新手(包括当年的我,哈哈)第一时间想到的写法是下面这样的: public static void main(String[] args) { List<String& ...
- 【C/C++】日期问题/算法笔记/入门模拟
最近把算法竞赛入门经典的前半部分看完了,开始看算法笔记入门算法. 看了前半部分的例题,很多是算法竞赛入门经典中出现过的,但是感觉这本书写的更适合初学者,而且真的很像考试笔记,通俗易懂. //日期问题 ...
- java多线程2：Thread中的方法
静态方法: Thread类中的静态方法表示操作的线程是"正在执行静态方法所在的代码块的线程". 为什么Thread类中要有静态方法,这样就能对CPU当前正在运行的线程进行操作.下面 ...
- MySQL基础之DML语句
DML 语句 DML(Data Manipulation Language)语句:数据操纵语句. 用途:用于添加.修改.删除和查询数据库记录,并检查数据完整性. 常用关键字:insert.update ...
- 童鞋，[HttpClient发送文件] 的技术实践请查收
1.荒腔走板 前几天有个童鞋在群里面问:怎么使用HttpClient发送文件? 之前我写了一个ABP上传文件,主要体现的是服务端,上传文件的动作是由前端小姐姐完成的, 我还真没有用HttpClient ...
- [BUUCTF]PWN——[V&N2020 公开赛]simpleHeap
[V&N2020 公开赛]simpleHeap 附件 步骤: 例行检查,64位,保护全开 根据题目可知是一道堆,直接用64位ida打开 我修改了这些函数的名称,这样方便看程序 add,我们可以 ...
- MySQL 创建定时任务 详解
自 MySQL5.1.6起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务,来取代原先只能由操作系统的计划任务来执行的工作.事件调度器有时也可称 ...
- nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...