【美高梅开户网址】有关采纳js算总价的难题,原生js达成Tmall购物车作用

前几天连着数据,发掘有个商品总价必要总计,商品数量不定,商品价位波动,商品体系不定,有一点蒙,想来想去想找到点轻松的写法也没悟出,最后提供一种轻巧的思绪吧。

所谓模型套模型,一般正是大家多少再次回到的是字典类型数组,于此同有的时候候那些字典类型里也可能有二个数组,而那一个数组又是字典类型的!是否有一些绕呢,放下Data一看就掌握了!

 js淘宝购物车功能描述:

原生js完毕Taobao购物车效用,js天猫购物车

 jsTaobao购物车成效描述:

 1、点击“+”,单个商品数量加1,总量据加1;单个商品价位加上,总价也助长。
 2.点击“-”,单个商品数量减1,总的数量据减1;单个商品价位滑坡,总价也减小。
 当该商品数量为0时,点击依然为0;
【美高梅开户网址】有关采纳js算总价的难题,原生js达成Tmall购物车作用。 3.呈现出总价,总量据和中间最贵的可怜商品的标价。 

美高梅开户网址 ,瞄一眼效果图:

美高梅开户网址 1

废话没多少说,LU代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
#list,p{list-style:none;width:600px;margin:0 auto;}
#list li {width:600px;height:50px;line-height:50px;margin-top:20px;font-size:20px;}
#list li input{width:60px;height:40px;line-height:40px;}
.highlight{color:red;font-size:30px;font-weight:bold;}
</style>
<script>
window.onload = function () {

 var oUl = $('list');
 var totalNumber = $('totalNum');
 var totalPrice = $('totalPrice');
 var mostExpensive = $('mostExpensive');
 var aLi = oUl.getElementsByTagName('li');
 var maxPrice = [0];

 for ( var i = 0; i < aLi.length; i++ ) {
  price(aLi[i]);
 }

 function price(oLi) {

  var aBtn = oLi.getElementsByTagName('input');
  var oStrong = oLi.getElementsByTagName('strong')[0];
  var oEm = oLi.getElementsByTagName('em')[0];
  var oSpan = oLi.getElementsByTagName('span')[0];

  aBtn[0].onclick = function () {
   var num = Number(oStrong.innerHTML);
   var price = parseFloat(oEm.innerHTML);
   var numbers = Number(totalNumber.innerHTML);
   var prices = parseFloat(totalPrice.innerHTML);
   num--;
   if (num === 0) {
    // 如果该商品数量为0,,那么就得把它的价格从价格表中清除 
    var index = maxPrice.indexOf(price);
    if (index > -1) maxPrice.splice(index, 1);
   } else if (num < 0) {
    num = 0; 
    return;
   }
   numbers--;
   oStrong.innerHTML = num;
   oSpan.innerHTML = num * price + '元';
   totalNumber.innerHTML = numbers;
   totalPrice.innerHTML = prices - (num + 1) * price;
   mostExpensive.innerHTML = maxPrice[0];

  }
  aBtn[1].onclick = function () {

   var num = Number(oStrong.innerHTML);
   var price = parseFloat(oEm.innerHTML);
   var numbers = Number(totalNumber.innerHTML);
   var prices = parseFloat(totalPrice.innerHTML);

   num++;
   numbers++;
   if (maxPrice.indexOf(price) < 0) {
    maxPrice.push(price)
    maxPrice.sort(function (a,b) {return b - a});
   }
   oStrong.innerHTML = num;
   oSpan.innerHTML = num * price + '元';
   totalNumber.innerHTML = numbers;
   totalPrice.innerHTML = prices + num * price;
   mostExpensive.innerHTML = maxPrice[0];
  }
 }
 function $(id) {return document.getElementById(id);}
}
</script>
</head>

<body>
<ul id="list">
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>12.5元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>10.5元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>8.5元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>8元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>14.5元</em>
  小计:0元
 </li>
</ul>

<p>
商品合计共:0件,
共花费了:0元<br />
其中最贵的商品单是:0元
</p>
</body>
</html>

以上便是本文的全部内容,希望对大家的上学抱有支持,也可望大家多多协理帮客之家。

jsTmall购物车功效描述:
1、点击“+”,单个商品数量加1,总数据加1;单个商品价位加上,总价…

物品数量,商品价位先创设七个数组;

data = [ { address = 北京市 北京市 丰台区 某某街, totalAmt = 0, favouredBillId = 0, realAmt = 0, tradeNum = 1, status = 0, tradeList = 105,103, yunAmt = 0, favouredMethod = , tuanUser = [ ], payedMethod = , shopCartList = [ { id = 105, unit = 千克, shopUserName = 北京市大兴区, isYun = 0, shopPrice = 777, countMoney = 777, shopInfo = , shopImg = /commodityImg/abcs3B.jpg, createDate = 1478138532000, tuanPrice = 0, count = 2, state = 1, userId = 10, yunPrice = 0, orderId = 20161103100225800744, shopId = 10, shopVipPrice = 222, shopName = 猪猪饲料11 }, { id = 103, unit = 吨, shopUserName = 北京市大兴区, isYun = 0, shopPrice = 1111, countMoney = 2222, shopInfo = , shopImg = /commodityImg/abcs3B.jpg, createDate = 1478138504000, tuanPrice = 0, count = 2, state = 1, userId = 10, yunPrice = 0, orderId = 20161103100225800744, shopId = 11, shopVipPrice = 609, shopName = 猪猪饲料12 } ], name = 张smile, id = 65, orderNo = 20161103100225800744, paySource = , phone = 12345678900, isTuan = 0, payedTime = <null>, orderTime = 1478138545000, favouredBill = 0, favouredAmt = 0, userId = 10 } ],

 1、点击“+”,单个商品数量加1,总量据加1;单个商品价位加上,总价也增添。
 2.点击“-”,单个商品数量减1,总的数量量减1;单个商品价位回退,总价也裁减。
 当该商品数量为0时,点击依旧为0;
 3.展现出总价,总量量和里面最贵的十三分商品的价位。 

  let pro_num=[];

  let pro_price=[];

品种中是或不是会不常遇上这种模型套型的图景,现以上为栗子, 这里的 data
是订单数组(暂叫一流 订单model), data
下有个shopCartList订单里的货物数组(暂叫二级 商品model).

瞄一眼效果图:

从此在新建贰个数组放单个商品总价的数组;

1.各样订单里的货品模型XHHOrderModel

美高梅开户网址 2

 let pro_total_price=[];
#import <Foundation/Foundation.h>@interface XHHOrderModel : NSObject// 商品id@property (nonatomic, copy) NSString *shopId;// 商品图片url@property (nonatomic, copy) NSString *shopImg;// 商品名称@property (nonatomic, copy) NSString *shopName;// 普通价格@property (nonatomic, assign) double shopPrice;// vip价格@property (nonatomic, assign) double shopVipPrice;// 团购价格@property (nonatomic, assign) double tuanPrice;// 当前商品运费@property (nonatomic, assign) double yunPrice;// 当前商品总价格@property (nonatomic, assign) double countMoney;// 是否是预估运费还是实际运费 0预估 1修改地址 2实际@property (nonatomic, copy) NSString *isYun;// 单位@property (nonatomic, copy) NSString *unit;// 选择商品吨数量值@property (nonatomic, assign) NSInteger count;+ (NSArray *)loadOrderInfoFromJson:(NSArray *)array;

废话十分的少说,LU代码

然后获得到具备的货物数量,商品价位放入数组,四个数组实行巡回;

子Model 的. m 文件就是简轻便单的调换模型了;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
#list,p{list-style:none;width:600px;margin:0 auto;}
#list li {width:600px;height:50px;line-height:50px;margin-top:20px;font-size:20px;}
#list li input{width:60px;height:40px;line-height:40px;}
.highlight{color:red;font-size:30px;font-weight:bold;}
</style>
<script>
window.onload = function () {

 var oUl = $('list');
 var totalNumber = $('totalNum');
 var totalPrice = $('totalPrice');
 var mostExpensive = $('mostExpensive');
 var aLi = oUl.getElementsByTagName('li');
 var maxPrice = [0];

 for ( var i = 0; i < aLi.length; i++ ) {
  price(aLi[i]);
 }

 function price(oLi) {

  var aBtn = oLi.getElementsByTagName('input');
  var oStrong = oLi.getElementsByTagName('strong')[0];
  var oEm = oLi.getElementsByTagName('em')[0];
  var oSpan = oLi.getElementsByTagName('span')[0];

  aBtn[0].onclick = function () {
   var num = Number(oStrong.innerHTML);
   var price = parseFloat(oEm.innerHTML);
   var numbers = Number(totalNumber.innerHTML);
   var prices = parseFloat(totalPrice.innerHTML);
   num--;
   if (num === 0) {
    // 如果该商品数量为0,,那么就得把它的价格从价格表中清除 
    var index = maxPrice.indexOf(price);
    if (index > -1) maxPrice.splice(index, 1);
   } else if (num < 0) {
    num = 0; 
    return;
   }
   numbers--;
   oStrong.innerHTML = num;
   oSpan.innerHTML = num * price + '元';
   totalNumber.innerHTML = numbers;
   totalPrice.innerHTML = prices - (num + 1) * price;
   mostExpensive.innerHTML = maxPrice[0];

  }
  aBtn[1].onclick = function () {

   var num = Number(oStrong.innerHTML);
   var price = parseFloat(oEm.innerHTML);
   var numbers = Number(totalNumber.innerHTML);
   var prices = parseFloat(totalPrice.innerHTML);

   num++;
   numbers++;
   if (maxPrice.indexOf(price) < 0) {
    maxPrice.push(price)
    maxPrice.sort(function (a,b) {return b - a});
   }
   oStrong.innerHTML = num;
   oSpan.innerHTML = num * price + '元';
   totalNumber.innerHTML = numbers;
   totalPrice.innerHTML = prices + num * price;
   mostExpensive.innerHTML = maxPrice[0];
  }
 }
 function $(id) {return document.getElementById(id);}
}
</script>
</head>

<body>
<ul id="list">
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>12.5元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>10.5元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>8.5元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>8元</em>
  小计:0元
 </li>
 <li>
  <input type="button" value="-" />
  <strong>0</strong>
  <input type="button" value="+" />
  单价:<em>14.5元</em>
  小计:0元
 </li>
</ul>

<p>
商品合计共:0件,
共花费了:0元<br />
其中最贵的商品单是:0元
</p>
</body>
</html>
 for(let i=0;i<pro_num.length;i++){

   for(let k=0;k<pro_price.length;k++){

     if(i==k){

      let alone_Total_price =parseFloat(pro_num[i])*parseFloat(pro_price[k]); //计算单个商品的总价

      pro_total_price.push(alone_Total_price); //获得所有的单个商品的总价

    } 

 }

  let sum=0;//初始化总价

  for(let i=0;i<pro_total_price.length;i++){

  sum+=pro_total_price[i] //单个总价相加  

 }

let total_price=sum.toFixed(2) //保留两位小数
#import "XHHOrderModel.h"#import "MJExtension.h"@implementation XHHOrderModel+ (NSArray *)loadOrderInfoFromJson:(NSArray *)array { return [self objectArrayWithKeyValuesArray:array].copy;}- countMoney { return _shopPrice * self.count;}

如上就是本文的全体内容,希望对大家的上学抱有援救,也冀望大家多多补助脚本之家。

倘使会有数值变化也许一再进行总价总计清空单个总价的数组

2.小编的订单模型 XHHMyOrderModel

您或者感兴趣的作品:

  • Javascript垄断(monopoly)Cookie完结购物车程序
  • Javascript操纵Cookie完结购物车程序
  • js+cookies达成悬浮购物车的法门
  • jQuery基于json与cookie完成购物车的不二秘诀
  • jQuery使用cookie与json轻巧达成购物车成效
  • 原生JS
    购物车及购物页面包车型大巴cookie使用办法
  • 简单来说的前端js+ajax
    购物车框架(入门篇)
  • JavaScript编写一个简易购物车功用
  • 选择Angularjs和bootstrap完成购物车成效
  • js达成货色抛物线加入购物车特效
  • 原生js+cookie达成购物车功能的艺术深入分析
pro_total_price.splice(pro_total_price.length,0);
#import <Foundation/Foundation.h>// 类型枚举typedef enum { XHHOrderStatus_all = 0, // 全部订单 XHHOrderStatus_complete, // 再次购买 XHHOrderStatus_applying, //申请中 XHHOrderStatus_toBePaid, //待支付 XHHOrderStatus_salesReturnApply, //退货申请 XHHOrderStatus_salesReturning, //退货中 XHHOrderStatus_salesReturned, //退货成功} XHHOrderStatus; // 申请中--待支付--已支付--待发货--发货中--确认收货--订单完成--退货申请--退货中--退货成功@interface XHHMyOrderModel : NSObject// 订单号@property (nonatomic, copy) NSString *orderNo;// 订单状态status@property (nonatomic, assign) XHHOrderStatus status;// 订单时间@property (nonatomic, copy) NSString *orderTime;// 下单时间@property (nonatomic, copy) NSString *payedTime;// 姓名收货人@property (nonatomic, copy) NSString *name;// 地址@property (nonatomic, copy) NSString *address;// 电话@property (nonatomic, copy) NSString *phone;// 商品件数@property (nonatomic, assign) NSInteger tradeNum;// 商品数组@property (nonatomic, strong) NSArray *shopCartList;// 产品实际支付@property (nonatomic, assign) double realAmt;@property (nonatomic, assign) double totalAmt;// 总产品实际支付@property (nonatomic, assign) double countMoney;// 总运费@property (nonatomic, assign) double yunAmt;// 团购, 1为是@property (nonatomic, assign) BOOL isTuan;// 团购合伙人号码@property (nonatomic, strong) NSArray *tuanUser;// 团购交易总计吨数@property (nonatomic, assign) NSInteger tradeList;+ (NSArray *)loadMyOrderInfoFromJson:(NSArray *)array;

如上那篇有关采用js算总价的主题材料就是小编共享给我们的全体内容了,希望能给我们贰个参阅,也希望大家多多帮忙脚本之家。

关于顶尖订单Model 的.m 文件就必须要注意了,套模型!!!

#import "XHHMyOrderModel.h"#import "MJExtension.h"#import "NSString+XHHTime.h"#import "XHHOrderModel.h"@implementation XHHMyOrderModel+ (NSArray *)loadMyOrderInfoFromJson:(NSArray *)array { return [self objectArrayWithKeyValuesArray:array].copy;}// 将时间戳转化为时间- (NSString *)orderTime { return [_orderTime timeChangeWithDateFormat:@"yyyy-MM-dd hh:mm"];}// 将时间戳转化为时间- (NSString *)payedTime { return [_payedTime timeChangeWithDateFormat:@"yyyy-MM-dd hh:mm"];}+ (NSDictionary *)objectClassInArray { return @{@"shopCartList" : [XHHOrderModel class] };}

美高梅开户网址 3

鉴于我们的后台相比较随意,商品总件数及实际付款不在一级订单 model
里再次回到,而是在二级商品中须要我们前台去做加法把二级商品数组
里的价位多少相加获得总价钱!

粗略方法来讲, 大家得以在View 里给 Model模型 赋值时做拍卖:

// model赋值- setModel:(XHHMyOrderModel *)model { _model = model; // 取出子 Model 的每张图片 NSArray *imgArray = [model.shopCartList valueForKeyPath:@"shopImg"]; // 数组里面 商品价格和 NSNumber *countMoney = [model valueForKeyPath:@"shopCartList.@sum.countMoney"]; // 数组里面 运费和 NSNumber *yunPrice = [model valueForKeyPath:@"shopCartList.@sum.yunPrice"]; // 实际价格 CGFloat realAmt = [countMoney doubleValue] + [yunPrice doubleValue]; }

自然也得以在 Controller 里抽出数据,在 dateSource
里从字典里巡回拿出每件货色价位相加获得总价格

美高梅开户网址 4

1.先截取查询订单网络央浼部分代码:

if ([json[@"data"] count]) { weakSelf.yunAmt = 0.00; // 总运费 weakSelf.realAmt = 0.00; // 总价格 // 订单 model 下的订单数据 weakSelf.myOrderModel = [XHHMyOrderModel loadMyOrderInfoFromJson:json[@"data"]][0]; if ([json[@"data"][0][@"shopCartList"] count]) { // 循环相加数组里字典的运费 得到总运费及总价格 for (NSDictionary *dic in json[@"data"][0][@"shopCartList"]) { weakSelf.yunAmt = weakSelf.yunAmt + [dic[@"yunPrice"] doubleValue]; weakSelf.realAmt = weakSelf.realAmt + [dic[@"countMoney"] doubleValue]; } // 子 Model下的商品列表数据 [weakSelf.goodList addObjectsFromArray:[XHHOrderModel loadOrderInfoFromJson:json[@"data"][0][@"shopCartList"]]]; } else { [MBProgressHUD showError:[NSString stringWithFormat:@"%@", json[@"errorMessage"]]]; } } } [weakSelf.tableView reloadData];

2.接着通过订单 MVC 和货色 MVC 来相对应数据管理及展现,收取核心代码:

#pragma mark - Table view data source- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.section == 0) { cell.textLabel.text = [NSString stringWithFormat:@"订单号: %@", self.orderNo]; } else if (indexPath.section == 1) { // 一级订单 Model XHHOrderAddressCell *cell = [XHHOrderAddressCell cellWithTableView:tableView]; cell.model = self.myOrderModel; return cell; } else if (indexPath.section == 2) { // 二级商品 Model XHHOrderGoodCell *cell = [XHHOrderGoodCell cellWithTableView:tableView]; if (self.goodList.count) { XHHOrderModel *model = self.goodList[indexPath.row]; cell.model = model; } return cell; } return cell;}#pragma mark - UITableViewDelegate- tableView:(UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath { if (indexPath.section == 1) { return XHHOrderAddressCellHeight; } else if (indexPath.section == 2) { return XHHOrderGoodCellHeight; } return 40;}

当商品数量多与一条时,则 商品MVC效果相比分明啦~

美高梅开户网址 5

PS:类似于这种订单类思路,在爆发订单号前我们必要团结去计算总价可能是或不是会员价之类的,不过固然发生订单后,全数关于
值类数据都不可能不从订单详细情况数据里去取,并非协和去计算!

是还是不是前几天以为逻辑顺了不胜枚举呢,看到那了,希望对你有救助啊本婴孩要去洗漱啦,晚安,各位程序媛技术员们

假若想看类似索引那系列型的Model 套 Model, 请移步类似索引Model套Model之
iOS模型闲谈二

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图