云南农职《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交互式网页设计 JavaScript简介: JavaScript诞生于1995年,主要是进行用户输入的合法性验证. JavaScript的概念: JavaScript可以嵌入到HT ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑥——简易旅游网
本页面分为顶部导航.登录注册栏,中部图片展示.主体内容和底部反馈模板 一.导航栏部分 要求一:设置菜单栏(二级菜单)和登录注册模块 要求二:当鼠标悬停到菜单栏(一级菜单)时,二级菜单以滑动效果滑出显示 ...
- Javascript交互式网页设计试题（一）
精选JS 50道试题,答案在首尾,喜欢收藏吧! 1.在JQuery中,下列( )方法能够获取或设置元素的文本内容,不含HTML标签. A attr() B text() C value() D rep ...
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...
- JavaScript交互式网页设计笔记
一.JavaScript基本语法 1.简介 JavaScript诞生于1995年,主要是进行用户输入的合法性验证 Web脚本语言 轻型的.解释性的 浏览器内 2.执行原理 当客户端向服务器请求某个 ...
- JavaScript交互式网页设计——jQuery
<一>.jQuery概述 <1>.概述:由于不同浏览器对JavaScript解析方式有所区别,随着浏览器的不断更新,JavaScript出现了兼容性问题.为解决此问题,出现了许 ...
- JavaScript交互式网页设计 • 【第6章 初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
最新文章
- 文献阅读|Dynamic-SLAM
- ADO.NET SQL
- When IT meets Coupon
- 七牛云上传文件之表单上传文件
- 信息安全与硬盘数据销毁
- android 自定义图片上传,android自定义ImageView仿图片上传(示例代码)
- 15行代码AC_ 【蓝桥杯】兴趣小组（解题报告+思考）
- CAN总线知识点概述
- 二、规则组织数学模型的建立
- CentOS下安装VirtualEnv的教程
- 前端为什么要工程化？
- bootstrap table 服务端分页
- PHP用户连续签到赠送额外积分
- icem不同的划分网格，但是质量差不多
- 光纤通道FC存储交换机的常见问题详解
- 【新知实验室 基于WEB的实时音视频（TRTC）案例搭建】
- 一篇文章彻底搞懂海明码
- 解决手机浏览器无法显示本地html文件
- 广义相对论-学习记录6-第三章-张量分析与黎曼几何3
- 微商加粉方法，微商加粉，究竟难在哪？