云南农职《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 ...
最新文章
- AI人才招聘：估值超400亿美元，即将IPO的独角兽招AI专家
- FPGA中IBERT 核的应用(二)
- swift如何打印对象的地址
- 不是内部或外部命令，也不是可运行的程序 或批处理文件。(如果放了环境变量还是没有用的话）（已经解决）
- 规则引擎：大厂营销系统资格设计全解
- 计算机与现代教育技术论文开题报告,计算机科学技术大学硕士与本科毕业论文开题报告...
- 华为鸿蒙宣传悟空视频_华为自研鸿蒙系统定档9月？《悟空》微电影透露玄机...
- java 切面_Java笔试面试精心整理得到89道Spring 核心知识【收藏向】
- 服务器预装操作系统,服务器预装操作系统吧
- Tomcat修改favicon.ico图标，Linux下Tomcat修改favicon.ico图标，Tomcat更换favicon.ico图标...
- 2012《Linux杂志》读者选择奖 （Readers' Choice Awards 2012- Linux Journal）
- Eclipse编译去除svn文件夹
- 通知NSNotificationCenter
- Linux下安装mysql（yum、二进制包、源码包）
- java微信分享demo
- vue 中面包屑带跳转的做法
- Excel中如何找出两列数据中相同的数据，并且进行同行显示
- 利用Selenium秒填朋友圈各种问卷星调查问卷
- 22考研上岸西电计科初试395分经验分享
- 2022年人工智能行业研究报告