diff --git "a/26\351\231\210\344\275\263\347\202\234/1205\344\275\234\344\270\232.txt" "b/26\351\231\210\344\275\263\347\202\234/1205\344\275\234\344\270\232.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..e1eed9ae2595d2b0e50cfc33b0f47fb2622a9996
--- /dev/null
+++ "b/26\351\231\210\344\275\263\347\202\234/1205\344\275\234\344\270\232.txt"
@@ -0,0 +1,263 @@
+ 笔记
+
+了解面向对象编程的基础概念及构造函数的作用，体会 JavaScript 一切皆对象的语言特征，掌握常见的对象属性和方法的使用。
+
+- 了解面向对象编程中的一般概念
+- 能够基于构造函数创建对象
+- 理解 JavaScript 中一切皆对象的语言特征
+- 理解引用对象类型值存储的的特征
+- 掌握包装类型对象常见方法的使用
+
+## 深入对象
+
+> 了解面向对象的基础概念，能够利用构造函数创建对象。
+
+### 构造函数
+
+构造函数是专门用于创建对象的函数，如果一个函数使用 `new` 关键字调用，那么这个函数就是构造函数。
+
+```js
+<script>
+  // 定义函数
+  function foo() {
+    console.log('通过 new 也能调用函数...');
+  }
+  // 调用函数
+  new foo;
+</script>
+```
+
+总结：
+
+1. 使用 `new` 关键字调用函数的行为被称为实例化
+2. 实例化构造函数时没有参数时可以省略 `()`
+3. 构造函数的返回值即为新创建的对象
+4. 构造函数内部的 `return` 返回的值无效！
+
+注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。
+
+### 实例成员
+
+通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
+
+```js
+<script>
+  // 构造函数
+  function Person() {
+    // 构造函数内部的 this 就是实例对象
+    // 实例对象中动态添加属性
+    this.name = '小明'
+    // 实例对象动态添加方法
+    this.sayHi = function () {
+      console.log('大家好~')
+    }
+  }
+  // 实例化，p1 是实例对象
+  // p1 实际就是 构造函数内部的 this
+  const p1 = new Person()
+  console.log(p1)
+  console.log(p1.name) // 访问实例属性
+  p1.sayHi() // 调用实例方法
+</script>
+```
+
+总结：
+
+1. 构造函数内部 `this` 实际上就是实例对象，为其动态添加的属性和方法即为实例成员
+2. 为构造函数传入参数，动态创建结构相同但值不同的对象
+
+注：构造函数创建的实例对象彼此独立互不影响。
+
+### 静态成员
+
+在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。
+
+```js
+<script>
+  // 构造函数
+  function Person(name, age) {
+    // 省略实例成员
+  }
+  // 静态属性
+  Person.eyes = 2
+  Person.arms = 2
+  // 静态方法
+  Person.walk = function () {
+    console.log('^_^人都会走路...')
+    // this 指向 Person
+    console.log(this.eyes)
+  }
+</script>
+```
+
+总结：
+
+1. 静态成员指的是添加到构造函数本身的属性和方法
+2. 一般公共特征的属性或方法静态成员设置为静态成员
+3. 静态成员方法中的 `this` 指向构造函数本身
+
+## 内置构造函数
+
+> 掌握各引用类型和包装类型对象属性和方法的使用。
+
+在 JavaScript 中**最主要**的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。
+
+在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 `Date` 就是内置的构造函数。
+
+```js
+<script>
+  // 实例化
+	let date = new Date();
+  
+  // date 即为实例对象
+  console.log(date);
+</script>
+```
+
+甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。
+
+### Object
+
+`Object` 是内置的构造函数，用于创建普通对象。
+
+```js
+<script>
+  // 通过构造函数创建普通对象
+  const user = new Object({name: '小明', age: 15})
+
+  // 这种方式声明的变量称为【字面量】
+  let student = {name: '杜子腾', age: 21}
+  
+  // 对象语法简写
+  let name = '小红';
+  let people = {
+    // 相当于 name: name
+    name,
+    // 相当于 walk: function () {}
+    walk () {
+      console.log('人都要走路...');
+    }
+  }
+
+  console.log(student.constructor);
+  console.log(user.constructor);
+  console.log(student instanceof Object);
+</script>
+```
+
+。
+
+总结：
+
+1. 推荐使用字面量方式声明对象，而不是 `Object` 构造函数
+2. `Object.assign` 静态方法创建新的对象
+3. `Object.keys` 静态方法获取对象中所有属性
+4. `Object.values` 表态方法获取对象中所有属性值
+
+### Array
+
+`Array` 是内置的构造函数，用于创建数组。
+
+```js
+<script>
+  // 构造函数创建数组
+  let arr = new Array(5, 7, 8);
+
+  // 字面量方式创建数组
+  let list = ['html', 'css', 'javascript']
+
+</script>
+```
+
+数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。
+
+总结：
+
+1. 推荐使用字面量方式声明数组，而不是 `Array` 构造函数
+2. 实例方法 `forEach` 用于遍历数组，替代 `for` 循环 (重点)
+3. 实例方法 `filter` 过滤数组单元值，生成新数组(重点)
+4. 实例方法 `map` 迭代原数组，生成新数组(重点)
+5. 实例方法 `join` 数组元素拼接为字符串，返回字符串(重点)
+6. 实例方法 `find` 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点)
+7. 实例方法`every` 检测数组所有元素是否都符合指定条件，如果**所有元素**都通过检测返回 true，否则返回 false(重点)
+8. 实例方法`some` 检测数组中的元素是否满足指定条件 **如果数组中有**元素满足条件返回 true，否则返回 false
+9. 实例方法 `concat` 合并两个数组，返回生成新数组
+10. 实例方法 `sort` 对原数组单元值排序
+11. 实例方法 `splice` 删除或替换原数组单元
+12. 实例方法 `reverse` 反转数组
+13. 实例方法 `findIndex` 查找元素的索引值
+
+### 包装类型
+
+在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例：
+
+```js
+<script>
+  // 字符串类型
+  const str = 'hello world!'
+ 	// 统计字符的长度（字符数量）
+  console.log(str.length)
+  
+  // 数值类型
+  const price = 12.345
+  // 保留两位小数
+  price.toFixed(2) // 12.34
+</script>
+```
+
+之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。
+
+#### String
+
+`String` 是内置的构造函数，用于创建字符串。
+
+```ja
+<script>
+  // 使用构造函数创建字符串
+  let str = new String('hello world!');
+
+  // 字面量创建字符串
+  let str2 = '你好，世界！';
+
+  // 检测是否属于同一个构造函数
+  console.log(str.constructor === str2.constructor); // true
+  console.log(str instanceof String); // false
+</script>
+```
+
+总结：
+
+1. 实例属性 `length` 用来获取字符串的度长(重点)
+2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点)
+3. 实例方法 `substring（需要截取的第一个字符的索引[,结束的索引号]）` 用于字符串截取(重点)
+4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点)
+5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)
+6. 实例方法 `toUpperCase` 用于将字母转换成大写
+7. 实例方法 `toLowerCase` 用于将就转换成小写
+8. 实例方法 `indexOf` 检测是否包含某字符
+9. 实例方法 `endsWith` 检测是否以某字符结尾
+10. 实例方法 `replace` 用于替换字符串，支持正则匹配
+11. 实例方法 `match` 用于查找字符串，支持正则匹配
+
+注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。
+
+#### Number
+
+`Number` 是内置的构造函数，用于创建数值。
+
+```js
+<script>
+  // 使用构造函数创建数值
+  let x = new Number('10')
+  let y = new Number(5)
+
+  // 字面量创建数值
+  let z = 20
+
+</script>
+```
+
+总结：
+
+1. 推荐使用字面量方式声明数值，而不是 `Number` 构造函数
+2. 实例方法 `toFixed` 用于设置保留小数位的长度
\ No newline at end of file
diff --git "a/26\351\231\210\344\275\263\347\202\234/1206\344\275\234\344\270\232\347\254\224\350\256\260.txt" "b/26\351\231\210\344\275\263\347\202\234/1206\344\275\234\344\270\232\347\254\224\350\256\260.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..addfc5606e07d36516a1f06ce5df7cef17c58e68
--- /dev/null
+++ "b/26\351\231\210\344\275\263\347\202\234/1206\344\275\234\344\270\232\347\254\224\350\256\260.txt"
@@ -0,0 +1,436 @@
+2. 实例方法 `toFixed` 用于设置保留小数位的长度
+
+   ### 作业
+
+~~~ js
+<script>
+    const dataArr = [
+      {
+        id: 1,
+        icon: 'img/火龙果.png',
+        isChecked: true,
+        num: 2,
+        price: 6,
+      },
+      {
+        id: 2,
+        icon: 'img/荔枝.png',
+        isChecked: false,
+        num: 7,
+        price: 20,
+      },
+      {
+        id: 3,
+        icon: 'img/榴莲.png',
+        isChecked: false,
+        num: 3,
+        price: 40,
+      },
+      {
+        id: 4,
+        icon: 'img/鸭梨.png',
+        isChecked: true,
+        num: 10,
+        price: 3,
+      },
+      { 
+        id: 5,
+        icon: 'img/樱桃.png',
+        isChecked: false,
+        num: 20,
+        price: 34,
+      },
+    ]
+        const tbody=document.querySelector('.tbody')
+        const all=document.querySelector('.check-all input')
+        const priceBox=document.querySelector('.price')
+        const payBox=document.querySelector('.pay')
+   // 封装一个渲染函数
+   function render(){
+    const strData=  dataArr.map((item,i)=>{
+        const {icon,isChecked,num,price}=item;
+        return `
+        <div class="tr" data-id=${i}>
+            <div clacss="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">${num}</span>
+                <button class="increase"> + </button>
+              </div>
+            </div>
+            <div class="td">${price * num}</div>
+            <div class="td"><button class="del button" data-id=${i}>删除</button></div>
+          </div> 
+        `;
+    
+    })
+        // 填充
+        tbody.innerHTML=strData.length ? strData.join('.') : `<div class="empty" style="display: none;">🛒空空如也</div>`;
+        // 选中的商品
+        const checkData=dataArr.filter(item=>item.isChecked=== true)
+        // 同步更新总价和总件数
+          priceBox.innerHTML=checkData.reduce((sum,item)=>sum+item.price * item.num,0)
+      
+         const nums= priceBox.innerHTML=checkData.reduce((sum,item)=>sum+item.num,0)
+          payBox.innerHTML=`结算 (${nums})`
+        }       
+      render()
+
+       // 常用事件委托的方面,给每一行加按钮
+   
+       tbody.addEventListener('click',function(e){
+        //  e.target 自己
+      const {dataset,tagName,className}=e.target
+      const id2=  e.target.parentNode.parentNode.dataset.id // 上两级
+      const id3=e.target.parentNode.parentNode.parentNode.dataset.id // 上3级
+
+        // 小复选框 两层
+            if(tagName==='INPUT'){
+              // 更改小复选框的样式
+                dataArr[id2].isChecked=e.target.checked
+                // 判断是不是所有的小复选框都选中了
+                all.checked= dataArr.every(item=>item.isChecked === true)
+                // 重新渲染
+                render()
+ 
+            }
+        // 删除 两层
+        if(className==='del button'){
+            dataArr.splice(id2,1)
+            // 渲染
+            render()
+        }
+        // -号 三层
+          if(className==='decrease'){
+            if(dataArr[id3].num>1){
+              dataArr[id3].num--
+            // 渲染
+            render()
+            }else{
+              dataArr.splice(id3,1)
+            }
+            
+          }
+        // +号 三层
+        if(className==='increase'){
+          dataArr[id3].num++
+            // 渲染
+            render()
+        }
+    }) 
+
+  </script>
+~~~
+ +312 08 官文诚/20231207 进阶第三天.md 0 → 100644 
+# JavaScript 进阶 - 第3天笔记
+
+> 了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。
+
+- 了解面向对象编程的一般特征
+- 掌握基于构造函数原型对象的逻辑封装
+- 掌握基于原型对象实现的继承
+- 理解什么原型链及其作用
+- 能够处理程序异常提升程序执行的健壮性
+
+## 编程思想
+
+> 学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。
+
+### 面向过程
+
+面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次
+
+调用就可以了。
+
+ 举个栗子：蛋炒饭
+
+![67679290689](D:\WeChat Files\wxid_stwttudubhaq22\FileStorage\File\2023-12\assets\1676792906898.png)
+
+### 面向对象
+
+面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
+
+![67679293032](D:\WeChat Files\wxid_stwttudubhaq22\FileStorage\File\2023-12\assets\1676792930329.png)
+
+在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
+
+面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。
+
+面向对象的特性：
+
+- 封装性
+
+
+- 继承性
+- 多态性
+
+## 构造函数
+
+对比以下通过面向对象的构造函数实现的封装：
+
+```html
+<script>
+  function Person() {
+    this.name = '佚名'
+    // 设置名字
+    this.setName = function (name) {
+      this.name = name
+    }
+    // 读取名字
+    this.getName = () => {
+      console.log(this.name)
+    }
+  }
+
+  // 实例对像，获得了构造函数中封装的所有逻辑
+  let p1 = new Person()
+  p1.setName('小明')
+  console.log(p1.name)
+
+  // 实例对象
+  let p2 = new Person()
+  console.log(p2.name)
+</script>
+```
+
+封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。
+
+同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之
+
+间是彼此不影响的
+
+>总结：
+>
+>1. 构造函数体现了面向对象的封装特性
+>2. 构造函数实例创建的对象彼此独立、互不影响
+
+封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。
+
+前面我们学过的构造函数方法很好用，但是 存在`浪费内存`的问题
+
+## 原型对象
+
+构造函数通过原型分配的函数是所有对象所 共享的。
+
+- JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象
+- 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
+- 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。
+- 构造函数和原型对象中的this 都指向 实例化的对象
+
+```html
+<script>
+  function Person() {
+    
+  }
+
+  // 每个函数都有 prototype 属性
+  console.log(Person.prototype)
+</script>
+```
+
+
+
+了解了 JavaScript 中构造函数与原型对象的关系后，再来看原型对象具体的作用，如下代码所示：
+
+```html
+<script>
+  function Person() {
+    // 此处未定义任何方法
+  }
+
+  // 为构造函数的原型对象添加方法
+  Person.prototype.sayHi = function () {
+    console.log('Hi~');
+  }
+	
+  // 实例化
+  let p1 = new Person();
+  p1.sayHi(); // 输出结果为 Hi~
+</script>
+```
+
+
+
+构造函数 `Person` 中未定义任何方法，这时实例对象调用了原型对象中的方法 `sayHi`，接下来改动一下代码：
+
+```html
+<script>
+  function Person() {
+    // 此处定义同名方法 sayHi
+    this.sayHi = function () {
+      console.log('嗨!');
+    }
+  }
+
+  // 为构造函数的原型对象添加方法
+  Person.prototype.sayHi = function () {
+    console.log('Hi~');
+  }
+
+  let p1 = new Person();
+  p1.sayHi(); // 输出结果为 嗨!
+</script>
+```
+
+构造函数 `Person` 中定义与原型对象中相同名称的方法，这时实例对象调用则是构造函中的方法 `sayHi`。
+
+通过以上两个简单示例不难发现 JavaScript 中对象的工作机制：**当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。**
+
+```html
+<script>
+	function Person() {
+    // 此处定义同名方法 sayHi
+    this.sayHi = function () {
+      console.log('嗨!' + this.name)
+    }
+  }
+
+  // 为构造函数的原型对象添加方法
+  Person.prototype.sayHi = function () {
+    console.log('Hi~' + this.name)
+  }
+  // 在构造函数的原型对象上添加属性
+  Person.prototype.name = '小明'
+
+  let p1 = new Person()
+  p1.sayHi(); // 输出结果为 嗨!
+  
+  let p2 = new Person()
+  p2.sayHi()
+</script>
+```
+
+总结：**结合构造函数原型的特征，实际开发重往往会将封装的功能函数添加到原型对象中。**
+
+### constructor 属性
+
+
+在哪里？ 每个原型对象里面都有个constructor 属性（constructor 构造函数）
+
+作用：该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子
+
+**使用场景：**
+
+如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.
+
+但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了
+
+此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
+
+### 对象原型
+
+
+对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 
+
+原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
+
+注意：
+
+- __proto__ 是JS非标准属性
+- [[prototype]]和__proto__意义相同
+- 用来表明当前实例对象指向哪个原型对象prototype
+- __proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数
+
+
+
+### 原型继承
+
+继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承
+
+的特性。
+
+龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。
+
+```html
+<body>
+  <script>
+    // 继续抽取   公共的部分放到原型上
+    // const Person1 = {
+    //   eyes: 2,
+    //   head: 1
+    // }
+    // const Person2 = {
+    //   eyes: 2,
+    //   head: 1
+    // }
+    // 构造函数  new 出来的对象 结构一样，但是对象不一样
+    function Person() {
+      this.eyes = 2
+      this.head = 1
+    }
+    // console.log(new Person)
+    // 女人  构造函数   继承  想要 继承 Person
+    function Woman() {
+
+    }
+    // Woman 通过原型来继承 Person
+    // 父构造函数（父类）   子构造函数（子类）
+    // 子类的原型 =  new 父类  
+    Woman.prototype = new Person()   // {eyes: 2, head: 1} 
+    // 指回原来的构造函数
+    Woman.prototype.constructor = Woman
+
+    // 给女人添加一个方法  生孩子
+    Woman.prototype.baby = function () {
+      console.log('宝贝')
+    }
+    const red = new Woman()
+    console.log(red)
+    // console.log(Woman.prototype)
+    // 男人 构造函数  继承  想要 继承 Person
+    function Man() {
+
+    }
+    // 通过 原型继承 Person
+    Man.prototype = new Person()
+    Man.prototype.constructor = Man
+    const pink = new Man()
+    console.log(pink)
+  </script>
+</body>
+```
+
+### 原型链
+
+基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对
+
+象的链状结构关系称为原型链
+
+![67679338869](D:\WeChat Files\wxid_stwttudubhaq22\FileStorage\File\2023-12\assets\1676793388695.png)
+
+```html
+<body>
+  <script>
+    // function Objetc() {}
+    console.log(Object.prototype)
+    console.log(Object.prototype.__proto__)
+
+    function Person() {
+
+    }
+    const ldh = new Person()
+    // console.log(ldh.__proto__ === Person.prototype)
+    // console.log(Person.prototype.__proto__ === Object.prototype)
+    console.log(ldh instanceof Person)
+    console.log(ldh instanceof Object)
+    console.log(ldh instanceof Array)
+    console.log([1, 2, 3] instanceof Array)
+    console.log(Array instanceof Object)
+  </script>
+</body>
+```
+
+① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
+
+② 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）
+
+③ 如果还没有就查找原型对象的原型（Object的原型对象）
+
+④ 依此类推一直找到 Object 为止（null）
+
+⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
+
+⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
diff --git "a/26\351\231\210\344\275\263\347\202\234/1207\344\275\234\344\270\232\347\254\224\350\256\260.txt" "b/26\351\231\210\344\275\263\347\202\234/1207\344\275\234\344\270\232\347\254\224\350\256\260.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..25596e2ad8aa8e073c5d7c72c5fe6155f5fc3911
--- /dev/null
+++ "b/26\351\231\210\344\275\263\347\202\234/1207\344\275\234\344\270\232\347\254\224\350\256\260.txt"
@@ -0,0 +1,77 @@
+笔记
+
+```js
+axios({
+  url: '目标资源地址',
+  method:'POST'//默认值
+  params: {
+    参数名: 值
+  }
+}).then(result => {
+  // 对服务器返回的数据做后续处理
+}).catch((cerror)=>{
+    log(打印错误)
+})
+```
+
+params:是请求是要配合get的
+
+post是要提交数据要有数据库体data
+
+axios 如何携带查询参数?
+
+* 使用 params 选项即可
+
+  ```js
+  axios({
+    url: '目标资源地址',
+    params: {
+      参数名: 值
+    }
+  }).then(result => {
+    // 对服务器返回的数据做后续处理
+  })
+  ```
+
+
+
+
+# 作业
+
+```js
+<script>
+    // 获取机器人回答消息 - 接口地址: http://hmajax.itheima.net/api/robot
+    // 查询参数名: spoken
+    // 查询参数值: 我说的消息
+    //聊天区域
+    let chat = document.querySelector('.chat')
+    //信息
+    let chatli = document.querySelector('.chat_list')
+    //输入框文本
+    let chatinpu = document.querySelector('.chat_input')
+
+    document.querySelector('.send_img').addEventListener('click',()=>{
+       let tex=chatinpu.value;
+       chatli.innerHTML+=`
+        <li class="right">
+          <span>${tex}</span>
+          <img src="./assets/me.png" alt="">
+        </li>
+       `
+       chatinpu.value='';
+     axios({
+      url:'http://hmajax.itheima.net/api/robot',
+      params: {
+        spoken:tex
+      }
+      }).then((itea)=>{
+        console.log(itea);
+        chatli.innerHTML += `<li class="left">
+          <img src="./assets/you.png" alt="">
+          <span>${itea.data.data.info.text}</span>
+        </li>`
+      }).catch((cerror)=>{
+        // console.log(cerror);
+      })
+    })
+  </script>
\ No newline at end of file