制作網(wǎng)站首頁(yè)的步驟永久開(kāi)源的免費(fèi)建站系統(tǒng)
1.深入對(duì)象
2.構(gòu)造函數(shù)
3.new 實(shí)例化執(zhí)行過(guò)程
4.實(shí)例成員和靜態(tài)成員
5.基本包裝類(lèi)型
6.Object靜態(tài)方法
7.數(shù)組reduce累計(jì)方法
reduce如何實(shí)現(xiàn)數(shù)組累加的
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const arr = [{name: '張三',salary: 10000}, {name: '李四',salary: 10000}, {name: '王五',salary: 20000},]// 漲薪的錢(qián)數(shù) 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.數(shù)組find、every和轉(zhuǎn)換為真數(shù)組
9.字符串常見(jiàn)方法
10.渲染贈(zèng)品案例
根據(jù)上圖代碼寫(xiě)成一行
11.綜合案例-購(gòu)物車(chē)案例渲染數(shù)據(jù)
12.綜合案例-購(gòu)物車(chē)案例合計(jì)模塊
總代碼：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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>
</head><body><div class="list"><!-- <div class="item"><img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt=""><p class="name">稱(chēng)心如意手搖咖啡磨豆機(jī)咖啡豆研磨機(jī) <span class="tag">【贈(zèng)品】10優(yōu)惠券</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>合計(jì)：<span class="amount">1000.00</span></div></div><script>const goodsList = [{id: '4001172',name: '稱(chēng)心如意手搖咖啡磨豆機(jī)咖啡豆研磨機(jī)',price: 289.9,picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',count: 2,spec: { color: '白色' }},{id: '4001009',name: '竹制干泡茶盤(pán)正方形瀝水茶臺(tái)品茶盤(pán)',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: '大師監(jiān)制龍泉青瓷茶葉罐',price: 139,picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',count: 1,spec: { size: '小號(hào)', color: '紫色' },gift: '50g茶葉,清洗球,寶馬, 奔馳'}]// 1. 根據(jù)數(shù)據(jù)渲染頁(yè)面document.querySelector('.list').innerHTML = goodsList.map(item => {// console.log(item) // 每一條對(duì)象// 對(duì)象解構(gòu) item.price item.countconst { picture, name, count, price, spec, gift } = item// 規(guī)格文字模塊處理const text = Object.values(spec).join('/')// 計(jì)算小計(jì)模塊 單價(jià) * 數(shù)量 保留兩位小數(shù) // 注意精度問(wèn)題，因?yàn)楸Ａ魞晌恍?shù)，所以乘以 100 最后除以100const subTotal = ((price * 100 * count) / 100).toFixed(2)// 處理贈(zèng)品模塊 '50g茶葉,清洗球'const str = gift ? gift.split(',').map(item => `<span class="tag">【贈(zèng)品】${item}</span> `).join('') : ''return `<div class="item"><img src=${picture} alt=""><p class="name">${name} ${str} </p><p class="spec">${text} </p><p class="price">${price.toFixed(2)}</p><p class="count">x${count}</p><p class="sub-total">${subTotal}</p></div>`}).join('')// 3. 合計(jì)模塊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>