From 43a89ce418ad74a3f1c0e10d46edcb4f8fcf32cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=8E=E5=87=BD?= <3084917167@qq.com>
Date: Wed, 6 Dec 2023 04:32:12 +0000
Subject: [PATCH] =?UTF-8?q?02=20=E9=99=88=E6=98=8E=E5=87=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈明函 <3084917167@qq.com>
---
 .../1205\347\254\224\350\256\260.md"          | 420 ++++++++++++++++++
 1 file changed, 420 insertions(+)
 create mode 100644 "02 \351\231\210\346\230\216\345\207\275/1205\347\254\224\350\256\260.md"
diff --git "a/02 \351\231\210\346\230\216\345\207\275/1205\347\254\224\350\256\260.md" "b/02 \351\231\210\346\230\216\345\207\275/1205\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..aa0517e
--- /dev/null
+++ "b/02 \351\231\210\346\230\216\345\207\275/1205\347\254\224\350\256\260.md"	
@@ -0,0 +1,420 @@
+````javascript
+// 构造函数
+function Xxx(形参列表){
+    this.键名 = 形参	// 实例属性
+    this.键名 = 形参
+    this.方法名 = function(){	// 实例方法
+        
+    }
+}
+// 静态变量和函数
+构造函数名.变量名 = 值
+构造函数名.方法名 = function(){}
+// 对象的方法
+Object.keys(对象名) // 返回一个数组，存放键名
+Object.values(对象名) // 返回一个数组，存放值
+Object.assign(目标对象,资源对象) // 将资源对象追加给目标对象，当键名相同时，覆盖目标对象的值
+
+// 数组的方法
+arr.reduce(function(累计值,当前元素){},初始值(一般为0))
+arr.reduce((prev,item) => prev + item,0) // 简写版本(此为加法，可根据关系式做加减乘除)
+
+arr.indexOf(元素) // 返回元素所在的下标，无则返回-1
+arr.find(function(ele){
+    return 条件  // 返回第一个满足条件的元素，无则undefind
+})
+arr.every(function(ele){
+    return 条件   // 判断每个元素是否都满足条件，满足返回true，反之false
+})
+
+// 伪数组转真数组
+Array.from(伪数组)
+
+// 字符串的方法
+str.substring(开始的索引,结束的索引) // 通过索引切割字符串 [开始,结束)
+str.startWish(str1) // 判断是否以str1为开头，是返回true
+str.includes(str1) // 判断是否包含str1，有就返回true
+str.split(切割符) // 将str以切割符为准进行切割，并返回一个数组
+作业
+综合案例
+
+<!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">称心如意手摇咖啡磨豆机咖啡豆研磨机 <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>
+  <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茶叶,清洗球,宝马, 奔驰'
+      }
+    ]
+
+
+
+
+    const list = document.querySelector('.list');
+    let str = '',sum=0
+    goodsList.forEach(e => {
+      const {
+        id,
+        name,
+        price,
+        picture,
+        count,
+        spec,
+        gift
+      } = e
+      let zen = gift?gift.split(',').map(e=>'【赠品】'+e+'</br>').join(''):''
+      sum+= price*count
+      str+=`<div class="item">
+      <img src="${picture}" alt="">
+      <p class="name">${name} <span class="tag">${zen}</span></p>
+      <p class="spec">${Object.values(spec).join('/')}</p>
+      <p class="price">${price.toFixed(2)}</p>
+      <p class="count">${count}</p>
+      <p class="sub-total">${(price*count).toFixed(2)}</p>
+    </div>`
+    }
+)
+document.querySelector('.amount').innerHTML=sum.toFixed(2)
+    list.innerHTML=str
+
+
+  </script>
+</body>
+
+</html>
+主观题
+
+<!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" />
+  <link rel="stylesheet" href="./css/inputnumber.css" />
+  <link rel="stylesheet" href="./css/index.css" />
+  <title>购物车</title>
+</head>
+
+<body>
+  <div class="app-container" id="app">
+    <!-- 顶部banner -->
+    <div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div>
+    <!-- 面包屑 -->
+    <div class="breadcrumb">
+      <span>🏠</span>
+      /
+      <span>购物车</span>
+    </div>
+    <!-- 购物车主体 -->
+    <div class="main">
+      <div class="table">
+        <!-- 头部 -->
+        <div class="thead">
+          <div class="tr">
+            <div class="th">选中</div>
+            <div class="th th-pic">图片</div>
+            <div class="th">单价</div>
+            <div class="th num-th">个数</div>
+            <div class="th">小计</div>
+            <div class="th">操作</div>
+          </div>
+        </div>
+        <!-- 身体 -->
+        <div class="tbody">
+
+          <!-- 渲染需要的行 -->
+          <!-- 
+            <div class="tr">
+            <div class="td"><input type="checkbox" checked /></div>
+            <div class="td"><img src="http://autumnfish.cn/static/火龙果.png" alt="" /></div>
+            <div class="td">6</div>
+            <div class="td">
+              <div class="my-input-number">
+                <button class="decrease"> - </button>
+                <span class="my-input__inner">2</span>
+                <button class="increase"> + </button>
+              </div>
+            </div>
+            <div class="td">12</div>
+            <div class="td"><button class="del">删除</button></div>
+          </div> 
+        -->
+
+        </div>
+      </div>
+      <!-- 底部 -->
+      <div class="bottom">
+        <!-- 全选 -->
+        <label class="check-all">
+          <input type="checkbox" />
+          全选
+        </label>
+        <div class="right-box">
+          <!-- 所有商品总价 -->
+          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">24</span></span>
+          <!-- 结算按钮 -->
+          <button class="pay">结算( 6 )</button>
+        </div>
+      </div>
+    </div>
+    <!-- 空车 -->
+    <div class="empty">🛒空空如也</div>
+  </div>
+  <script>
+    const dataArr = [
+      {
+        id: 1,
+        icon: 'http://autumnfish.cn/static/火龙果.png',
+        isChecked: true,
+        num: 2,
+        price: 6,
+      },
+      {
+        id: 2,
+        icon: 'http://autumnfish.cn/static/荔枝.png',
+        isChecked: false,
+        num: 7,
+        price: 20,
+      },
+      {
+        id: 3,
+        icon: 'http://autumnfish.cn/static/榴莲.png',
+        isChecked: false,
+        num: 3,
+        price: 40,
+      },
+      {
+        id: 4,
+        icon: 'http://autumnfish.cn/static/鸭梨.png',
+        isChecked: true,
+        num: 10,
+        price: 3,
+      },
+      {
+        id: 5,
+        icon: 'http://autumnfish.cn/static/樱桃.png',
+        isChecked: false,
+        num: 20,
+        price: 34,
+      },
+    ]
+
+
+
+
+
+    
+    show(dataArr)
+    const arr = dataArr
+    const allcheck = document.querySelector('.check-all input')
+    allcheck.addEventListener('click', () => {
+      arr.forEach(e => e.isChecked = allcheck.checked)
+      show(arr)
+    })
+    document.querySelector('.tbody').addEventListener('click', e => {
+      const { target } = e
+      switch (true) {
+        case target.type == 'checkbox':
+          arr.find(e => e.id == target.parentNode.parentNode.dataset.id).isChecked = target.checked
+          allcheck.checked = arr.every(e => e.isChecked)
+          show(arr)
+          break;
+        case Array.from(target.classList).indexOf('del') != -1:
+          arr.splice(arr.indexOf(arr.find(e => e.id == target.parentNode.parentNode.dataset.id)), 1)
+          show(arr)
+          break;
+        case Array.from(target.classList).indexOf('decrease') != -1:
+          arr.find(e => e.id == target.parentNode.parentNode.parentNode.dataset.id).num ? arr.find(e => e.id == target.parentNode.parentNode.parentNode.dataset.id).num -= 1 : alert('不能再减了')
+          show(arr)
+          break;
+        case Array.from(target.classList).indexOf('increase') != -1:
+          arr.find(e => e.id == target.parentNode.parentNode.parentNode.dataset.id).num += 1
+          show(arr)
+          break;
+      }
+    })
+    
+
+
+
+
+    function show(arr = []) {
+      let str = ''
+      let sum = 0
+      arr.forEach(e => {
+        const { id, icon, isChecked, num, price } = e
+        str += `<div class="tr"  data-id=${id}>
+            <div class="td"><input type="checkbox" ${isChecked ? 'checked' : ''} /></div>
+            <div class="td"><img src=${icon} alt="" /></div>
+            <div class="td">${price}</div>
+            <div class="td">
+              <div class="my-input-number">
+                <button class="decrease"> - </button>
+                <span class="my-input__inner">${num}</span>
+                <button class="increase"> + </button>
+              </div>
+            </div>
+            <div class="td">${price * num}</div>
+            <div class="td"><button class="del">删除</button></div>
+          </div> `
+        isChecked ? sum += price * num : ''
+      })
+      document.querySelector('.tbody').innerHTML = str
+      document.querySelector('.price').innerHTML = sum
+    }
+
+
+
+
+
+
+
+
+  </script>
+</body>
+
+</html>
+````
+
-- 
Gitee

