建设广告网站需要资质吗,网站源码上传,网页打不开connection,娱乐网站制作一、需求 根据下图渲染购物车页面 二、代码素材
以下是缺失JS部分的代码#xff0c;感兴趣的小伙伴可以先自己试着写一写
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatib…一、需求 根据下图渲染购物车页面 二、代码素材
以下是缺失JS部分的代码感兴趣的小伙伴可以先自己试着写一写
!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茶叶,清洗球}]/script
/body/html 三、完整代码
!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茶叶,清洗球}]const list document.querySelector(.list)let str goodsList.filter(item {const { name, price, picture, count, spec, gift } itemconst gifts gift ? gift.split(,).map(item span classtag【赠品】${item}/span).join() : str div classitemimg src${picture} altp classname${name} ${gifts}/pp classspec${Object.values(spec).join(/)}/pp classprice${price.toFixed(2)}/pp classcountx${count}/pp classsub-total${((price * 100 * count) / 100).toFixed(2)}/p/div})list.innerHTML strconst total goodsList.reduce((pre, cur) pre (cur.count * cur.price * 100) / 100, 0)document.querySelector(.amount).innerHTML total.toFixed(2)/script
/body/html
