javascript 实现购物车多项物品累计求总价案例 ,价格保留两位小数

效果图:

html代码:

 <div class="list"><!-- <div class="item"><img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt=""><p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p><p class="spec">白色/10寸</p><p class="price">289.90</p><p class="count">x2</p><p class="sub-total">579.80</p></div> --></div><div class="total"><div>合计：<span class="amount">1000.00</span></div></div>

css样式:

<style>* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 100px auto 0;}.item {padding: 15px;transition: all .5s;display: flex;border-top: 1px solid #e4e4e4;}.item:nth-child(4n) {margin-left: 0;}.item:hover {cursor: pointer;background-color: #f5f5f5;}.item img {width: 80px;height: 80px;margin-right: 10px;}.item .name {font-size: 18px;margin-right: 10px;color: #333;flex: 2;}.item .name .tag {display: block;padding: 2px;font-size: 12px;color: #999;}.item .price,.item .sub-total {font-size: 18px;color: firebrick;flex: 1;}.item .price::before,.item .sub-total::before,.amount::before {content: "¥";font-size: 12px;}.item .spec {flex: 2;color: #888;font-size: 14px;}.item .count {flex: 1;color: #aaa;}.total {width: 990px;margin: 0 auto;display: flex;justify-content: flex-end;border-top: 1px solid #e4e4e4;padding: 20px;}.total .amount {font-size: 18px;color: firebrick;font-weight: bold;margin-right: 50px;}</style>

JS代码:

 <script>const goodsList = [{id: '4001172',name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',price: 289.9,picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',count: 2,spec: { color: '白色' }},{id: '4001009',name: '竹制干泡茶盘正方形沥水茶台品茶盘',price: 109.8,picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',count: 3,spec: { size: '40cm*40cm', color: '黑色' }},{id: '4001874',name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',price: 488,picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',count: 1,spec: { color: '青色', sum: '一大四小' }},{id: '4001649',name: '大师监制龙泉青瓷茶叶罐',price: 139,picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',count: 1,spec: { size: '小号', color: '紫色' },gift: '50g茶叶,清洗球'}]// 1.根据已有的数据进行页面渲染(创建标签)let res = goodsList.map(item => {// 定义一个变量保存赠品信息let gift_str = '';gift_str = item.gift ? item.gift.split(',').map(items => { return `<span class="tag" >【赠品】${items}</span >` }).join('') : '';// 遍历的时候创建元素return `<div class="item"><img src="${item.picture}" alt=""><p class="name">${item.name} ${gift_str}</p><p class="spec">${Object.values(item.spec).join('/')}</p><p class="price">${item.price.toFixed(2)}</p><p class="count">x${item.count}</p><p class="sub-total">${(item.price * item.count).toFixed(2)}</p></div>`;}).join('');// 将得到的字符串添加到父容器中document.querySelector('.list').innerHTML = res;// 计算总价格:将提供的数据价格累加求和document.querySelector('.amount').innerHTML = goodsList.reduce(function (sum, item) {return sum += item.price * item.count}, 0).toFixed(2);</script>

javascript 实现购物车多项物品累计求总价案例 ,价格保留两位小数相关推荐

ACMNO.12有一分数序列： 2/1 3/2 5/3 8/5 13/8 21/13...... 求出这个数列的前N项之和，保留两位小数。输入 N 输出数列前N项和样例输入 10
题目描述有一分数序列: 2/1 3/2 5/3 8/5 13/8 21/13...... 求出这个数列的前N项之和,保留两位小数. 输入 N 输出数列前N项和样例输入 10 样例输出 16.48 ...
有一分数序列： 2/1 3/2 5/3 8/5 13/8 21/13...... 求出这个数列的前N项之和，保留两位小数。
这里写自定义目录标题新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中.居左.居右 ...
求以下double数组的平均值(四舍五入保留两位小数)：
import java.math.BigDecimal;/*** 求以下double数组的平均值(四舍五入保留两位小数):* double[] arr = {0.1,0.2,2.1,3.2,5.56, ...
输入两个数、用python求他们的和_从键盘上输入俩个实型数,编程求它们的和差积商,要求输出时,保留两位小数C语言编程题:从键盘上输入两个...
从键盘上输入俩个实型数,编程求它们的和差积商,要求输出时,保留两位小数 C语言编程题:从键盘上输入两个 www.zhiqu.org 时间: 2020-11-23 参考代码: #includev ...
JavaScript 保留两位小数的三种实现方法
以下将为大家介绍 JavaScript 保留两位小数的三种实现方法. 目录 1.利用toFixed () 方法 2.利用Math.floor () 方法 3.利用正则表达式方法 1.利用toFixed ...
从键盘输入直接三角形的两条直接边的长度，求斜边的长度和三角形的面积，计算结果保留两位小数
从键盘输入直接三角形的两条直接边的长度,求斜边的长度和三角形的面积,计算结果保留两位小数解析: #include <stdio.h> #include <math.h>int ...
c语言输入三个数求平均值和乘积,C语言输入三个实数型,计算它们的和并输出（要求保留两位小数...
C语言输入三个实数型,计算它们的和并输出(要求保留两位小数以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! C语言输入三个 ...
c语言平曲线坐标,问题描述】给定平面任意两点的坐标（x1，y1）和（x2，y2），求这两点之间的距离（保留两位小数）。...
问题描述]给定平面任意两点的坐标(x1,y1)和(x2,y2),求这两点之间的距离(保留两位小数).要求求距离的运算单独放在一个函数中,然后在main函数中调用..[输入形式]输入两点的坐标(x1,y ...
Javascript保留两位小数
javascript语言,因为是弱类型语言,没有java那么多类型,所以在处理浮点数保留两位小数上,没有那么多格式化办法.javascript语言中字符串和整数,浮点数是有区别的. 一般而言,保留两位 ...

javascript 实现购物车多项物品累计求总价案例 ,价格保留两位小数

javascript 实现购物车多项物品累计求总价案例 ,价格保留两位小数相关推荐

最新文章

热门文章