From c3ce090bbf768c02c77e38638f735ab2ad2f4627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E4=BA=A8=E4=BC=9F?= <529310475@qq.com>
Date: Wed, 20 Dec 2023 11:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=81=E4=BA=8C=E6=9C=88=E4=BA=8C=E5=8D=81?=
 =?UTF-8?q?=E5=8F=B7=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2023115Dom\344\275\234\344\270\232.md"    |  80 ++++++++
 ...07\346\234\272\345\231\250\344\272\272.md" |  41 +++++
 .../20231211.md"                              | 171 ++++++++++++++++++
 .../20231213.md"                              |  14 ++
 .../20231213\346\255\243\345\210\231.md"      | 122 +++++++++++++
 ...13\350\275\256\346\222\255\345\233\276.md" |  83 +++++++++
 6 files changed, 511 insertions(+)
 create mode 100644 "11 \351\202\271\344\272\250\344\274\237/2023115Dom\344\275\234\344\270\232.md"
 create mode 100644 "11 \351\202\271\344\272\250\344\274\237/20231207\346\234\272\345\231\250\344\272\272.md"
 create mode 100644 "11 \351\202\271\344\272\250\344\274\237/20231211.md"
 create mode 100644 "11 \351\202\271\344\272\250\344\274\237/20231213.md"
 create mode 100644 "11 \351\202\271\344\272\250\344\274\237/20231213\346\255\243\345\210\231.md"
 create mode 100644 "11 \351\202\271\344\272\250\344\274\237/20231213\350\275\256\346\222\255\345\233\276.md"

diff --git "a/11 \351\202\271\344\272\250\344\274\237/2023115Dom\344\275\234\344\270\232.md" "b/11 \351\202\271\344\272\250\344\274\237/2023115Dom\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..fbbfa37
--- /dev/null
+++ "b/11 \351\202\271\344\272\250\344\274\237/2023115Dom\344\275\234\344\270\232.md"	
@@ -0,0 +1,80 @@
+## 笔记
+
+今天学了
+
+~~~
+let //定义变量
+~~~
+
+~~~
+const // 定义常量
+~~~
+
+```
+ <script>
+    var a=[1,2,3];
+    a=[1];
+    console.log(a);
+    let b=[1,2,3];
+    b=[1];
+    console.log(b);
+    const c=[1,2,3];
+    c=[1];
+    console.log(c); // 常量不能被再次定义
+  </script>
+```
+
+获取匹配的第一个元素
+
+~~~
+document.querySelector
+~~~
+
+获取匹配的第所有元素
+
+~~~
+document.querySelectorAll
+~~~
+
+修改文字内容
+
+对象。innerText 属性
+
+解析标签
+
+对象。innerHTML
+
+html,head,body,title 唯一是内置的对象
+
+## 作业
+
+~~~
+ // 1. 需要一个随机数 
+    let random =Math.ceil(Math.random()*sliderData.length)
+
+    // console.log(sliderData[i]);
+   
+    // 2. 把对应的数据渲染到标签里面
+
+      // 2.1 获取图片
+      const img = document.querySelector('.slider-wrapper img')
+        // 2.2. 修改图片路径  =  对象.url
+        img.scr=sliderData[random].url
+    // 3. 把p里面的文字内容更换
+      // 3.1 获取p
+      let p= document.querySelector('p')
+      // 3.2修改p
+      p.innerText =sliderData[random].title
+      // 4. 修改背景颜色
+      let foolter =document.querySelector('.slider-footer')
+      div.style.backgroundColor=sliderData[random].color;
+    // 5. 小圆点 
+    let dict = document.querySelectorAll(`.slider-indicator li`);
+ 
+
+     
+    // 让当前这个小li 添加 active这个类
+
+
+~~~
+
diff --git "a/11 \351\202\271\344\272\250\344\274\237/20231207\346\234\272\345\231\250\344\272\272.md" "b/11 \351\202\271\344\272\250\344\274\237/20231207\346\234\272\345\231\250\344\272\272.md"
new file mode 100644
index 0000000..dc3fca0
--- /dev/null
+++ "b/11 \351\202\271\344\272\250\344\274\237/20231207\346\234\272\345\231\250\344\272\272.md"	
@@ -0,0 +1,41 @@
+## 笔记
+
+机器人
+
+~~~
+//通用的父类 const tbody = document.querySelector('.list')
+
+//通用外号 const creater = '梦梦';
+
+//封装一个先获取列表数据再渲染数据的函数 function getBookListAndShow (){
+
+//获取数据
+axios({ url :'https://hmajax.itheima.net/api/books', params:{ // creator:'梦梦' //creator:creater creater } }).then(result =>{ // console.log(result.data.data); //渲染数据 删除添加那些都i要渲染 所以给他打包封装起来 const trHtml = result.data.data.map((item,i) =>{ //每次都要加item 这给他结构一下 const {id,author,bookname,publisher} = item; return <tr> <td>${i+1}</td> <td>${author}</td> <td>${bookname}</td> <td>${publisher}</td> <td data-id=${id}> <span class="del">删除</span> <span class="edit">编辑</span> </td> </tr>; //到这步就要给这些进行填充 去找父类 }).join('')//数组变字符串 用join 再塞进去 tbody.innerHTML = trHtml; console.log(trHtml); }) } //每打开网页就要调用一次 getBookListAndShow();
+
+/* 目标2:实现图书的添加功能 2.1 按钮显示和隐藏 保存按钮点击事件 关闭这个弹窗，采集表单数据 2.2 将数据用axios调用接口 提交服务器 2.3 保存按钮点击事件 成交提交就关闭弹窗 2.4 重新获取列表并渲染 */ const form = document.querySelector('.add-form'); //为了控制的这个弹窗先获取 const addModalBox = document.querySelector('.add-model') const addModel = document.querySelector(addModalBox)
+
+//给保存点击事件 document.querySelector('.add-btn').addEventListener('click',()=>{ //采集数据 //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 // 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 // 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 //.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象， //比如 , <textarea> 以及 。不过，选择 标签本身进行序列化一般更容易些 const book = serializer(from,{hash:true,empty:true})//只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。 //如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。 console.log(book);
+
+//2.2 将数据用axios调用接口 提交服务器
+axios({ url:'https://hmajax.itheima.net/api/books', method:'post', data:{ creater, ...book } }).then (result=>{ // console.log(result); //清空表单 from.reset() //关闭弹窗 addModel.hide() //重新获取列表并且渲染 getBookListAndShow() })
+
+})
+
+/* 目标3：删除图书 3.1 给删除点击事件 3.2 获取要删除的id 3.3 通过id调用接口删除服务器中的数据 3.4 成功就获取重新获取新列表并且渲染 */
+
+///将点击事件委托给tbody tbody.addEventListener('click',(e)=>{ console.log(e.target); //两种方法可以确定点到的删除按钮 //className === 'del' //classList.contains('del') 包含的意思 if(e.target.className === 'del'){ console.log('你删除了图书'); } // 3.2 获取要删除的id console.log(e.target.parentNode.dataset.id); const id = e.target.parentNode.dataset.id //3.3 通过id调用接口删除服务器中的数据 axios({ //url:https://hmajax.itheima.net/api/books/+id url:https://hmajax.itheima.net/api/books/${id}, method:'delete' }).then(result=>{ //console.log(result); //3.4 成功就获取重新获取新列表并且渲染 getBookListAndShow() })
+
+})
+
+/**
+
+目标4：编辑图书
+4.1 编辑弹框 ->显示和隐藏
+4.2 获取当前编辑图书数据 -> 回显到编辑表单中
+4.3 提交保存修改，刷新列表 */ // 4.1 编辑弹框 显示 和隐藏 const editDom = document.querySelector('.edit-modal') const editModal = new bootstrap.Modal(editDom)
+// 编辑元素 点击 弹框显示 document.querySelector('.list').addEventListener('click', e => { // 判断点击是否为编辑元素 if (e.target.classList.contains('edit')) { // 4.2 获取当前编辑图书数据->回显到编辑表单中 const theId = e.target.parentNode.dataset.id axios({ url: http://hmajax.itheima.net/api/books/${theId} }).then(result => { const bookObj = result.data.data // document.querySelector('.edit-form .bookname').value = bookObj.bookname // document.querySelector('.edit-form .author').value = bookObj.author // 数据对象“属性”和标签“类名”一致 // 遍历数据对象，使用属性去获取对应的标签，快速赋值 const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher'] keys.forEach(key => { document.querySelector(.edit-form .${key}).value = bookObj[key] }) }) editModal.show() } })
+
+// 修改按钮->点击->隐藏弹框 document.querySelector('.edit-btn').addEventListener('click', () => { // 4.3 提交保存修改，并刷新列表 const editForm = document.querySelector('.edit-form') // console.log(editForm); const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true }) // 保存正在编辑的图书id，隐藏起来：无需让用户修改 // axios({ url: http://hmajax.itheima.net/api/books/${id}, method: 'PUT', data: { creator, ...book } }).then((result) => { console.log(result); // 修改成功以后，重新获取并刷新列表 getBooksList() // 隐藏弹框 editModal.hide() }) })
+})
+~~~
+
diff --git "a/11 \351\202\271\344\272\250\344\274\237/20231211.md" "b/11 \351\202\271\344\272\250\344\274\237/20231211.md"
new file mode 100644
index 0000000..b6c549c
--- /dev/null
+++ "b/11 \351\202\271\344\272\250\344\274\237/20231211.md"	
@@ -0,0 +1,171 @@
+## 笔记
+
+Bootstrap 弹框
+
+```
+不离开当前页面，显示单独内容，供用户操作
+```
+
+使用Bootstrap 弹框
+
+```
+<button data-bs-toggle="modal" data-bs-target="css选择器">
+  显示弹框
+</button>
+
+<button data-bs-dismiss="modal">Close</button>
+```
+
+图书馆
+
+~~~
+/**
+ * 目标1：渲染图书列表
+ * 1.1 获取数据
+ * 1.2 渲染数据
+ */
+const creator = '丘丘'
+// 封装-获取并渲染图书列表函数
+function getBooksList() {
+    // 1.1 获取数据
+    axios({
+        url: 'http://hmajax.itheima.net/api/books',
+        params: {
+            // 外号：获取对应数据
+            creator
+        }
+    }).then(result => {
+        // console.log(result)
+        const bookList = result.data.data
+        // console.log(bookList)
+        // 1.2 渲染数据
+        const htmlStr = bookList.map((item, index) => {
+            return `<tr>
+            <td>${index + 1}</td>
+            <td>${item.bookname}</td>
+            <td>${item.author}</td>
+            <td>${item.publisher}</td>
+            <td data-id=${item.id}>
+                <span class="del">删除</span>
+                <span class="edit">编辑</span>
+            </td>
+            </tr>`
+        }).join('')
+        document.querySelector('.list').innerHTML = htmlStr
+    })
+}
+// 网页加载运行,获取并渲染列表一次
+getBooksList()
+/**
+ * 目标2：新增图书
+ * 2.1 新增弹框   显示影藏
+ * 2.2 收集表单数据，并提交服务器保存
+ * 刷新图书列表
+ */
+// 2.1 创建弹框对象
+const addModalDom = document.querySelector('.add-modal')
+const addModal = new bootstrap.Modal(addModalDom)
+// 保存按钮 点击   隐藏弹框
+document.querySelector('.add-btn').addEventListener('click', () => {
+    // 2.2 收集表单数据，并提交到服务器保存
+    const addForm = document.querySelector('.add-form')
+    const bookObj = serialize(addForm, { hash: true, empty: true })
+    // 提交到服务器
+    axios({
+        url: 'http://hmajax.itheima.net/api/books',
+        method: 'POST',
+        data: {
+            ...bookObj,
+            creator
+        }
+    }).then(result => {
+        console.log(result);
+        // 2.3 添加成功后，重新请求并渲染图书列表
+        getBooksList()
+        // 重置表单
+        addForm.reset()
+        // 隐藏弹框
+        addModal.hide()
+    })
+})
+
+/**
+ * 目标3：删除图书
+ * 3.1 删除元素绑定点击事件-> 获取图书id
+ * 3.2 调用删除接口
+ * 3.3 刷新图书列表
+ */
+// 3.1 删除元素 ->点击（事件委托）
+document.querySelector('.list').addEventListener('click', e => {
+    // 获取触发事件目标元素
+    // 判断点击的是删除元素
+    if (e.target.classList.contains('del')) {
+        // 获取图书id（自定义属性id）
+        const theId = e.target.parentNode.dataset.id
+        // 3.2 调用删除接口 
+        axios({
+            url: `http://hmajax.itheima.net/api/books/${theId}`,
+            method: 'DELETE'
+        }).then(() => {
+            // 3.3 刷新图书列表
+            getBooksList()
+        })
+    }
+})
+
+/**
+ * 目标4：编辑图书
+ * 4.1 编辑弹框 ->显示和隐藏
+ * 4.2 获取当前编辑图书数据 -> 回显到编辑表单中
+ * 4.3 提交保存修改，刷新列表
+ */
+// 4.1 编辑弹框 显示 和隐藏
+const editDom = document.querySelector('.edit-modal')
+const editModal = new bootstrap.Modal(editDom)
+// 编辑元素 点击   弹框显示
+document.querySelector('.list').addEventListener('click', e => {
+    // 判断点击是否为编辑元素
+    if (e.target.classList.contains('edit')) {
+        // 4.2 获取当前编辑图书数据->回显到编辑表单中
+        const theId = e.target.parentNode.dataset.id
+        axios({
+            url: `http://hmajax.itheima.net/api/books/${theId}`
+        }).then(result => {
+            const bookObj = result.data.data
+            // document.querySelector('.edit-form .bookname').value = bookObj.bookname
+            // document.querySelector('.edit-form .author').value = bookObj.author
+            // 数据对象“属性”和标签“类名”一致
+            // 遍历数据对象，使用属性去获取对应的标签，快速赋值
+            const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
+            keys.forEach(key => {
+                document.querySelector(`.edit-form .${key}`).value = bookObj[key]
+            })
+        })
+        editModal.show()
+    }
+})
+// 修改按钮->点击->隐藏弹框
+document.querySelector('.edit-btn').addEventListener('click', () => {
+    // 4.3 提交保存修改，并刷新列表
+    const editForm = document.querySelector('.edit-form')
+    // console.log(editForm);
+    const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
+    // 保存正在编辑的图书id，隐藏起来：无需让用户修改
+    // <input type="hidden" class="id" name="id" value="84783">
+    axios({
+        url: `http://hmajax.itheima.net/api/books/${id}`,
+        method: 'PUT',
+        data: {
+            creator,
+            ...book
+        }
+    }).then((result) => {
+        console.log(result);
+        // 修改成功以后，重新获取并刷新列表
+        getBooksList()
+        // 隐藏弹框
+        editModal.hide()
+    })
+})
+~~~
+
diff --git "a/11 \351\202\271\344\272\250\344\274\237/20231213.md" "b/11 \351\202\271\344\272\250\344\274\237/20231213.md"
new file mode 100644
index 0000000..146dfdd
--- /dev/null
+++ "b/11 \351\202\271\344\272\250\344\274\237/20231213.md"	
@@ -0,0 +1,14 @@
+## 笔记
+
+axj
+
+~~~
+目标：封装_简易axios函数_获取省份列表_
+定义axios函数，接收配置对象，返回Promise对象
+发起XHR请求，默认请求方法为GET
+调用成功/失败的处理程序
+使用axios函数，获取省份列表展示 */ // 1. 定义axios函数，接收配置对象，返回Promise对象 function axios(config) { return new Promise((resolve, reject) => { // 2. 发起XHR请求，默认请求方法为GET const XML= new XMLHttpRequest() XML.open(config.method || 'GET', config.url) XML.addEventListener('loadend', () => { // 3. 调用成功/失败 if ( XML.status >= 200 && XML.status < 300) { resolve(JSON.parse( XML.response)) } else { reject(new Error( XML.response)) } }) XML.send() }) }
+// 4. 使用axios函数，获取省份列表展示 axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => { console.log(result) document.querySelector('.my-p').innerHTML = result.list.join('
+') }).catch(error => { console.log(error) document.querySelector('.my-p').innerHTML = error.message })
+~~~
+
diff --git "a/11 \351\202\271\344\272\250\344\274\237/20231213\346\255\243\345\210\231.md" "b/11 \351\202\271\344\272\250\344\274\237/20231213\346\255\243\345\210\231.md"
new file mode 100644
index 0000000..e9bad32
--- /dev/null
+++ "b/11 \351\202\271\344\272\250\344\274\237/20231213\346\255\243\345\210\231.md"	
@@ -0,0 +1,122 @@
+## 笔记
+
+
+
+~~~
+index
+
+<script>
+    let li1 = document.querySelector('.xtx_navs li:nth-child(1)');
+    let li2 = document.querySelector('.xtx_navs li:nth-child(2)');
+    li1.addEventListener('click',function(){
+      location.href='./login.html'
+    })
+    li2.addEventListener('click',function(){
+      location.href='./register.html'
+    })
+</script>
+login
+
+<script>
+    // 选择登录的方式
+    let tabNav = document.querySelector('.tab-nav')
+    let tabPane = document.querySelectorAll('.tab-pane') 
+    tabNav.addEventListener('click',function(e){
+      if(e.target.tagName==='A'){
+        document.querySelector('.tab-nav .active').classList.remove('active')
+        e.target.classList.add('active')
+        for(let i=0;i<tabPane.length;i++){
+          tabPane[i].style.display = 'none';
+        }
+        tabPane[e.target.dataset.id].style.display = 'block'
+      }
+    })
+
+    // 转跳登录页面
+    let username = document.querySelector('[name=username]')
+    let password = document.querySelector('[name=password]')
+    let form = document.querySelector('form')
+    let remember = document.querySelector('.agree .remember')
+    form.addEventListener('submit',function(e){
+        e.preventDefault()
+        if(remember.checked==false){
+          return alert('未勾选')
+        }
+      location.href='./index.html'
+    })
+  </script>
+register
+
+  // 用户名
+    let username = document.querySelector('[name=username]');
+
+    // 手机号
+    let phone = document.querySelector('[name=phone]');
+    phone.addEventListener('blur',function(){
+      let phoneRules = /^1[0-9]{10}$/
+      if(!phoneRules.test(phone.value)){
+        alert('请输入正确的手机号')
+        phone.value=''
+      }
+    });
+
+    // 发送验证码
+    let vCode = document.querySelector('[name=code]');
+    (function(){
+      let i=5
+      let x = true
+      let code = document.querySelector('.xtx-form-item .code')
+      code.addEventListener('click',function(){
+        if(x){
+          x = false
+          let sent = setInterval(function(){
+            i--;
+            code.innerHTML=`${i}秒后重新获取`
+            if(i<=1){
+              clearInterval(sent)
+              code.innerHTML = '重新获取'
+              i=5
+              x = true
+            }
+          },1000)
+        }
+      })
+    })();
+   
+    // 填写密码
+    let password = document.querySelector('[name=password]')
+    let spanOne = password.nextElementSibling
+    password.addEventListener('blur',function(){
+      let rules = /^[\w]{6,20}$/;
+      if(!rules.test(password.value)){
+        spanOne.innerHTML = '设置6至20位字母、数字和符号组合'
+        password.value=''
+      }else{
+        spanOne.innerHTML = ''
+      }
+    })
+
+    // 再次填写密码
+    let confirm = document.querySelector('[name=confirm]')
+    let spanTwo = confirm.nextElementSibling
+    confirm.addEventListener('blur',function(){
+      if(password.value!==confirm.value){
+        spanTwo.innerHTML = '请再次输入上面密码'
+        confirm.value=''
+      }else{
+        spanTwo.innerHTML = ''
+      }
+    })
+
+    // 登录
+    let form = document.querySelector('form')
+    form.addEventListener('submit',function(e){
+      e.preventDefault()
+      if(password.value==='' || confirm.value==='' || username.value==='' || phone.value==='' || vCode.value===''){
+      alert('请填写完整')
+    }else{
+      location.href='./login.html'
+    }
+    })
+~~~
+
diff --git "a/11 \351\202\271\344\272\250\344\274\237/20231213\350\275\256\346\222\255\345\233\276.md" "b/11 \351\202\271\344\272\250\344\274\237/20231213\350\275\256\346\222\255\345\233\276.md"
new file mode 100644
index 0000000..800a278
--- /dev/null
+++ "b/11 \351\202\271\344\272\250\344\274\237/20231213\350\275\256\346\222\255\345\233\276.md"	
@@ -0,0 +1,83 @@
+## 笔记
+
+axj
+
+~~~
+<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script>
+$(document).ready(function(){
+
+
+// 1. 初始数据
+const data = [
+      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+    ]
+    // 获取元素
+    let img=document.querySelector('.slider-wrapper img')
+    let p=document.querySelector('.slider-footer p')
+    let footer=document.querySelector('.slider-footer')
+    // let prebtn=document.querySelector('.toggle .prev')
+    // let nextbtn=document.querySelector('.toggle .next')
+   
+
+
+    // 定义一个全局的图片位置的变量
+    let num=0
+    
+   
+    // 先用定时器让其自动转换
+   let timer= setInterval(function(){
+      // nextbtn.click();
+      $('.toggle .next')[0].click();
+    },1000)
+
+    
+    // 鼠标移动到图片，就暂时滚动
+    img.addEventListener('mouseenter',function(){
+      clearInterval(timer)
+    })
+    img.addEventListener('mouseleave',function(){
+      timer= setInterval(function(){
+        $('.toggle .next')[0].click();
+    },1000)
+    })
+  
+    // 下一页
+    $('.toggle .next').click(function(){
+    num++;
+    if(num>=data.length){
+      num=0}
+    img.src=data[num].url
+    p.innerHTML=data[num].title
+    footer.style.backgroundColor =data[num].color
+    // document.querySelector('.slider-indicator .active').classList.remove('active')
+    $('.slider-indicator .active')[0].classList.remove('active')
+    // document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+    $(`.slider-indicator li:nth-child(${num+1})`)[0].classList.add('active')
+   })
+
+
+    // 上一页
+    $('.toggle .prev').click(function(){
+    num--;
+    if(num<0){
+      num=data.length}
+    img.src=data[num].url
+    p.innerHTML=data[num].title
+    footer.style.backgroundColor =data[num].color
+    // document.querySelector('.slider-indicator .active').classList.remove('active')
+    $('.slider-indicator .active')[0].removeClass('active')
+    // document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+    $(`.slider-indicator li:nth-child(${num+1})`)[0].addClass('active')
+   })
+})
+  </script>
+~~~
+
-- 
Gitee