JS计算购物车中商品总价

简介: JS计算购物车中商品总价

具体思路:

商品信息通过创建商品对象来实现,商品的加和通过创建数组,再通过遍历数组读取指定属性对价格进行计算。

// 总价变量
        let sum = 0;
        // 商品对象
        function Goods(name,price,amount){
          this.name = name;
          this.price = price;
          this.amount = amount;
          // this.add = fun();
        }
        // 定义声明商品实例
        let goods1 = new Goods("111",100,1);
        let goods2 = new Goods("11",10,1);
        let goods3 = new Goods("2",100,2);
        // 创建函数进行总价计算
        function totalPrice(){
          // 将对象放入数组
          let arr = new Array(goods1,goods2,goods3);
          // 通过遍历将各个商品价格进行相加
          for(let i in arr){
            sum = sum + (arr[i].price * arr[i].amount);
          };
          console.log(sum);
        };
        console.log(goods1);
        console.log(goods2);
        console.log(goods3);
        totalPrice();

1. 当单价改变的时候,计算出这件商品的总金额,同时计算出所有商品的总金额;

      2.当单件商品的总金额改变时,计算出所有商品的总金额

     3.页面初始化的时候,单价有初始值,自动计算出商品的总金额,同时计算出所有商品的总金额;

单价,总金额:input输入框输入的是只能是非负的浮点数或者整数切只能保留两位小数点

 

相关文章
|
3天前
|
JavaScript 前端开发
|
2月前
|
JavaScript
js计算时间差,包括计算,天,时,分,秒
js计算时间差,包括计算,天,时,分,秒
214 16
|
26天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
14 2
|
28天前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
19 1
|
28天前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
20 0
|
28天前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器:深入理解与实践
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器:深入理解与实践
17 0
|
3月前
|
缓存 JavaScript 前端开发
Vue.js 2 项目实战(五):水果购物车
Vue.js 2 项目实战(五):水果购物车
|
5月前
|
设计模式 JSON JavaScript
Javascript实现购物车的详细代码
Javascript实现购物车的详细代码
106 3
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的商品推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的商品推荐系统附带文章源码部署视频讲解等
39 0
基于springboot+vue.js+uniapp小程序的商品推荐系统附带文章源码部署视频讲解等
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的二手商品网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的二手商品网站附带文章源码部署视频讲解等
20 0