<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/shopping-cart.css">
<script type="text/javascript">
//定义全局变量
var i = 0;
//金额总和
var money = 0;
//计算合计价格
var cart_money = new Object();
//全部商品ID
var cart_id = new Object();
//备份商品ID,用于全选后去掉全选又再次全选
var cart_id_copy = new Object();
</script>
</head>
<body style="background-color:#f5f5f5">
<div class="mui-bar mui-bar-nav" style="background-color: #1b82d2;">
<h1 class="mui-title" style="color: #ffffff;font-size:20px;">商品消费</h1>
</div>
<div style="height:26px;"></div>
<form method="post" name="cart_form" target="_self" id="cart_form" action="">
<div class="commodity_list_box">
<div class="commodity_box">
<div class="commodity_list">
<ul class="commodity_list_term">
<li class="select">
<div class="mui-row" style="padding-top:10px;">
<div class="mui-col-sm-5 mui-col-xs-5" style="font-size:18px;left:15px;">
<img src="image/pig.jpg" />
</div>
<em aem="0" cart_id="84" style="top:57px"></em>
<div class="mui-col-sm-7 mui-col-xs-7" style="font-size:18px;right:8px;top:-5px;">
<div class="div_center" >
<h4>猪肉 5斤</h4>
<span>
日期:<label class="mr-6">11月5日-12月11日</label> <br>
猪肉类型:<label >种猪</label>
</span>
<p class="now_value"><i>¥</i><b class="qu_su">100.00</b></p>
</div>
<div class="div_right" style="right:-5px;bottom:1px;">
<i onclick="reducew(this)">-</i>
<span class="zi">1</span>
<input type="hidden" value="84">
<i onclick="plusw(this)">+</i>
</div>
</div>
</div>
</li>
<li class="select">
<div class="mui-row" style="padding-top:10px;">
<div class="mui-col-sm-5 mui-col-xs-5" style="font-size:18px;left:15px;">
<img src="image/niu.jpg" />
</div>
<em aem="0" cart_id="84" style="top:57px"></em>
<div class="mui-col-sm-7 mui-col-xs-7" style="font-size:18px;right:8px;top:-5px;">
<div class="div_center" >
<h4>牛肉 15斤</h4>
<span>
日期:<label class="mr-6">8月5日-0月15日</label> <br>
牛肉类型:<label >种牛</label>
</span>
<p class="now_value"><i>¥</i><b class="qu_su">10.00</b></p>
</div>
<div class="div_right" style="right:-5px;bottom:1px;">
<i onclick="reducew(this)">-</i>
<span class="zi">1</span>
<input type="hidden" value="84">
<i onclick="plusw(this)">+</i>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- footer -->
<div class="settle_box" style="bottom:0px;">
<ul class="all_check select">
<li><span id="all_pitch_on"></span><div>全选</div></li>
</ul>
<ul class="total_amount">
<li style="display: flex;">合计:<p id="total_price">¥<b>0</b></p></li>
<li style="display: flex;">
<a class="settle_btn" href="javascript:void(0);" id="confirm_cart">结算</a>
</li>
</ul>
<a class="settle_btn" href="javascript:void(0);" id="confirm_cart1" onclick="big_cart_remove()">删除</a>
</div>
</form>
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
var noX = 0; /* 没选中时点击加减计算数量 */
var allThis = $(".commodity_box .select em"); /*底部全选*/
/* 减 */
function reduceMod(e, totalH, mod, noX) {
var tn = e.siblings().find(".qu_su").text(); /* 当前选中商品 */
var tn1 = e.siblings().find(".zi").text(); /* 商品数量 */
if(mod != 2) {
var Total = parseFloat(totalH) - (tn * tn1); /* 总价格减该商品总数价格 */
$("#total_price b").text(Total.toFixed(2));
} else {
/* 合计加单价-1 */
var Total = parseFloat(totalH) - parseFloat(tn); /* 总价格减该商品总数价格 */
$("#total_price b").text(Total.toFixed(2));
}
};
/* 加 */
function plusMod(e, totalH, mod) {
var tn = e.siblings().find(".qu_su").text(); /* 当前选中商品 */
var tn1 = e.siblings().find(".zi").text(); /* 商品数量 */
if(mod != 2) {
var Total = parseFloat(totalH) + (tn * tn1); /* 总价格加上该商品总数价格 */
$("#total_price b").text(Total.toFixed(2));
} else {
/* 合计加单价+1 */
var Total = parseFloat(totalH) + (parseFloat(tn) + (noX - 1)); /* 总价格加上该商品总数价格 */
$("#total_price b").text(Total.toFixed(2));
}
};
/*全选该店商品价格 加*/
function commodityPlusMod(e, totalH) {
var qu = e.parents(".commodity_list").find(".pitch_on").parent().find(".qu_su");
var quj = e.parents(".commodity_list").find(".pitch_on").parent().find(".zi");
var Total = 0;
var erTotal = true;
/* 该商品全部金额 */
for(var i = 0; i < qu.length; i++) {
var n = qu.eq(i).text();
var n1 = quj.eq(i).text();
/*合计价格*/
if(erTotal) {
Total = parseFloat(totalH) + (parseFloat(n) * parseFloat(n1));
if(Total < 0)
Total = 0;
erTotal = false;
} else {
Total = parseFloat(Total) + (parseFloat(n) * parseFloat(n1));
if(Total < 0)
Total = 0;
}
}
$("#total_price b").text(Total.toFixed(2)); /* 合计金额 */
};
var plus;
/*全选该店商品价格 减*/
function commodityReduceMod(e, totalH) {
var qu = e.parents(".commodity_list").find(".pitch_on").parent().find(".qu_su");
var quj = e.parents(".commodity_list").find(".pitch_on").parent().find(".zi");
var Total = 0;
var erTotal = true;
/* 该商品全部金额 */
for(var i = 0; i < qu.length; i++) {
var n = qu.eq(i).text();
var n1 = quj.eq(i).text();
/*合计价格*/
if(erTotal) {
Total = parseFloat(totalH) - (parseFloat(n) * parseFloat(n1));
plus = parseFloat(n) * parseFloat(n1);
if(Total < 0)
Total = 0;
erTotal = false;
} else {
Total = parseFloat(Total) - (parseFloat(n) * parseFloat(n1));
plus = parseFloat(n) * parseFloat(n1);
if(Total < 0)
Total = 0;
}
$("#total_price b").text(Total.toFixed(2)); /* 合计金额 */
}
return plus;
};
/*全部商品价格*/
function commodityWhole() {
/* 合计金额 */
var je = $(".commodity_box .select .qu_su"); /* 全部商品单价 */
var je1 = $(".commodity_box .select .zi"); /* 全部商品数量 */
var TotalJe = 0;
for(var i = 0; i < je.length; i++) {
var n = je.eq(i).text();
var n1 = je1.eq(i).text();
TotalJe = TotalJe + (parseFloat(n) * parseFloat(n1));
}
$("#total_price b").text(TotalJe.toFixed(2)); /* 合计金额 */
};
//选择结算商品
$(".select em").click(function() {
var su = $(this).attr("aem");
var carts_id = $(this).attr("cart_id");
var totalH = $("#total_price b").text(); /* 合计金额 */
if(su == 0) {
/* 单选商品 */
if($(this).hasClass("pitch_on")) {
/*去该店全选*/
$(this).parents("ul").siblings(".select").find("em").removeClass("pitch_on");
/*去底部全选*/
$("#all_pitch_on").removeClass("pitch_on");
$(this).removeClass("pitch_on");
reduceMod($(this), totalH);
cart_id[c
利用原生html、css和js在MUI框架中写的购物车消费代码


在开发移动端应用时,MUI(DCloud推出的前端框架)是一个常见的选择,它提供了丰富的UI组件,便于快速构建美观的移动界面。本项目是关于在MUI框架中使用原生HTML、CSS和JavaScript实现购物车功能的代码示例。下面我们将深入探讨这个主题,解析其中涉及的关键知识点。 1. **MUI框架**: MUI的设计理念是轻量级、高性能,它提供了与iOS和Android原生控件相似的Web组件,使得开发者能够快速创建出与原生应用体验接近的网页应用。MUI的核心组件包括按钮、表单、网格、导航、弹出层等,这些都将在购物车功能的实现中发挥作用。 2. **HTML结构**: HTML是页面的基础结构,购物车功能的实现通常需要以下元素:商品列表、购物车按钮、购物车详情(包含商品、数量、总价等信息)。使用MUI的组件样式,可以创建出符合框架风格的页面元素,例如`<mui-tableview>`用于展示商品列表,`<mui-btn>`作为添加到购物车的按钮。 3. **CSS样式**: CSS负责页面的布局和美化。在MUI中,通过引入对应的CSS库,可以快速设置元素的样式,如圆角、阴影、边距等。同时,使用CSS选择器对特定元素进行操作,例如选中状态的商品、购物车数量的增减按钮等。 4. **JavaScript交互**: JavaScript是实现动态效果和功能的核心。在这个项目中,主要涉及到以下几个方面: - **事件监听**:监听用户的点击行为,如添加商品到购物车、删除商品、更改商品数量等。 - **数据管理**:存储购物车中的商品信息,可能使用JSON对象或数组来表示,数据结构应包含商品ID、名称、价格、数量等字段。 - **计算总价**:根据购物车中商品的数量和单价实时计算总价,可能需要考虑小数点处理和价格格式化。 - **更新视图**:当数据发生变化时,用JavaScript更新DOM,显示最新的购物车状态。 5. **本地存储**: 为了保持用户关闭页面后购物车的状态,可以利用浏览器的`localStorage`或`sessionStorage`保存购物车数据。这需要在页面加载时检查本地存储,如果有数据则恢复购物车状态。 6. **响应式设计**: MUI框架本身就具有良好的响应式特性,但开发购物车功能时,还需确保在不同屏幕尺寸下都能正确显示和操作,比如商品列表的折叠、购物车按钮的触达性等。 7. **性能优化**: 在处理大量商品时,注意避免一次性加载所有数据,可以采用分页或懒加载技术。此外,避免频繁操作DOM,可使用`documentFragment`或`innerHTML`批量更新。 以上是关于“利用原生HTML、CSS和js在MUI框架中写的购物车消费代码”的主要知识点。通过理解并掌握这些技术,开发者可以构建出一个功能完整、用户体验良好的移动购物车应用。在实际项目中,还需要考虑错误处理、兼容性测试以及用户体验的进一步优化。





- 1













- 粉丝: 396
- 资源: 42
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 基于Matlab 2021的两电平拓扑三相桥式逆变并网仿真:双环PI控制、SPWM调制与LCL滤波研究,基于Matlab2021的电压型三相桥式逆变并网仿真研究:双环PI控制、SPWM调制与LCL滤波
- STM32储能逆变器技术资料:原理图、PCB设计、源代码集成并网充电放电与全方位保护功能,功率达5kw,智能控制与在线升级,STM32储能逆变器技术资料:原理图、PCB与源代码集成,智能并网充电放电及
- OH考试认证测试题解析-聚焦OpenHarmony系统及其应用场景
- 双重搜索算法BAS-SCA融合正余弦算法优化极限学习机ELM:混合改进机制,避免局部最优,提高收敛精度,双重搜索算法BAS-SCA与正余弦算法融合优化极限学习机ELM:避免局部最优的混合改进机制,提高
- 基于Matlab2021a的SPWM调制二极管钳位型NPC逆变器不平衡负载仿真研究:五电平输出与三相滤波响应,基于Matlab2021a的二极管钳位型NPC逆变器不平衡负载仿真研究:五电平电压波形与对
- 《有限元模拟双层叠软包电池热失控特性:五个过程的温度变化与最终结果分析》,《有限元模拟双层叠软包电池热失控特性:温度变化及热失控五阶段过程分析》,双层叠软包电池热失控温度特性模拟,热失控的五个过程用有
- FSCaptureSetup.exe
- Unity小工具-物体的拖拽与组装
- 基于PFC6.0的巴西劈裂实验:二维与三维声发射振铃计数的深度解析与应用学习参考,基于PFC6.0的巴西劈裂实验:声发射振铃计数的二维与三维研究,供学术与实用参考指南 ,基于PFC6.0的巴西劈裂实验
- 基于扩展卡尔曼滤波的车辆状态观测器:Carsim与Simulink联合应用,高效估计车辆Vx、β、γ状态,附详细注释与说明文档,基于扩展卡尔曼滤波的Carsim与Simulink联合车辆状态观测器 利
- g767.torrent
- 松下PLC编程软件:全功能版FP WIN Pro-支持IEC61131-3标准的强大工具软件,松下PLC编程软件FP WIN Pro全功能版:支持多种编程语言和程序管理,简便易用适合现场操作 (满足
- 多维度基因表达与关联性分析:WGCNA、共表达网络、表型关联与聚类模块解析,基于生物信息学技术的基因网络与模块综合分析,WGCNA分析 基因共表达网络分析 基因表型关联分析 基因聚类分析 基因模块分析
- 六自由度机械臂建模仿真及高级功能实现:从运动学到轨迹规划,雅克比矩阵求解与蒙特卡洛采样分析,六自由度机械臂建模仿真与控制面板实现:运动学正逆解、动力学仿真与轨迹规划技术解析,六自由度机械臂建模仿真(m
- 博文qtmysqldata
- 仓颉语言:构建全场景智能化的HarmonyOS应用程序



评论0