亚当学院网站建设视频教程,长沙官网seo技术,淘宝客建立网站推广怎么做,老版本网站开发工具1.深入对象 2.构造函数 3.new 实例化执行过程 4.实例成员和静态成员 5.基本包装类型 6.Object静态方法 7.数组reduce累计方法 reduce如何实现数组累加的 !DOCTYPE html
html langenheadmeta charsetUTF-8meta htt… 1.深入对象 2.构造函数 3.new 实例化执行过程 4.实例成员和静态成员 5.基本包装类型 6.Object静态方法 7.数组reduce累计方法 reduce如何实现数组累加的 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscriptconst arr [{name: 张三,salary: 10000}, {name: 李四,salary: 10000}, {name: 王五,salary: 20000},]// 涨薪的钱数 10000 * 0.3 // const money arr.reduce(function (prev, item) {// return prev item.salary * 0.3// }, 0)const money arr.reduce((prev, item) prev item.salary * 0.3, 0)console.log(money)/script
/body/html
8.数组find、every和转换为真数组 9.字符串常见方法 10.渲染赠品案例 根据上图代码写成一行 11.综合案例-购物车案例渲染数据 12.综合案例-购物车案例合计模块 总代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {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
/headbodydiv classlist!-- div classitemimg srchttps://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg altp classname称心如意手摇咖啡磨豆机咖啡豆研磨机 span classtag【赠品】10优惠券/span/pp classspec白色/10寸/pp classprice289.90/pp classcountx2/pp classsub-total579.80/p/div --/divdiv classtotaldiv合计span classamount1000.00/span/div/divscriptconst 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. 根据数据渲染页面document.querySelector(.list).innerHTML goodsList.map(item {// console.log(item) // 每一条对象// 对象解构 item.price item.countconst { picture, name, count, price, spec, gift } item// 规格文字模块处理const text Object.values(spec).join(/)// 计算小计模块 单价 * 数量 保留两位小数 // 注意精度问题因为保留两位小数所以乘以 100 最后除以100const subTotal ((price * 100 * count) / 100).toFixed(2)// 处理赠品模块 50g茶叶,清洗球const str gift ? gift.split(,).map(item span classtag【赠品】${item}/span ).join() : return div classitemimg src${picture} altp classname${name} ${str} /pp classspec${text} /pp classprice${price.toFixed(2)}/pp classcountx${count}/pp classsub-total${subTotal}/p/div}).join()// 3. 合计模块const total goodsList.reduce((prev, item) prev (item.price * 100 * item.count) / 100, 0)// console.log(total)document.querySelector(.amount).innerHTML total.toFixed(2)/script
/body/html
