From d138e456ad9ed60733426b3c1186f158125744a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?16=20=E9=98=99=E8=8B=8F=E6=96=87?= <2361635242@qq.com>
Date: Thu, 14 Dec 2023 12:54:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231213\344\275\234\344\270\232.md"      | 180 ++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 "16 \351\230\231\350\213\217\346\226\207/20231213\344\275\234\344\270\232.md"

diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231213\344\275\234\344\270\232.md" "b/16 \351\230\231\350\213\217\346\226\207/20231213\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..fb4bffb
--- /dev/null
+++ "b/16 \351\230\231\350\213\217\346\226\207/20231213\344\275\234\344\270\232.md"	
@@ -0,0 +1,180 @@
+# 作业
+
+```html
+const creator = 'cheng';
+
+function render() {
+    $.ajax({
+        url: 'https://hmajax.itheima.net/api/books',
+        type: 'get',
+        data: {
+            creator
+        },
+        success: (result) => {
+            const data = result.data;
+            $('tbody').html(
+                data.map((item, index) => {
+                    const {id, bookname, author, publisher} = item;
+                    return `<tr>
+              <td>${index + 1}</td>
+              <td>${bookname}</td>
+              <td>${author}</td>
+              <td>${publisher}</td>
+              <td data-id=${id}>
+                <span class="del">删除</span>
+                <span class="edit">编辑</span>
+              </td>
+            </tr>`
+                }).join(''))
+        },
+        error: error => {
+            console.log(error)
+        }
+    })
+
+}
+
+render();
+const addModal = $('.add-modal')[0];
+const newAddModal = new bootstrap.Modal(addModal)
+//添加里的保存单机事件
+$('.add-btn').bind('click', () => {
+    const form = $('.add-form')[0];
+    const book = serialize(form, {hash: true, empty: true});
+    $.ajax({
+            url: 'https://hmajax.itheima.net/api/books',
+            type: 'post',
+            data: {
+                creator,
+                ...book
+            },
+            success: () => {
+                form.reset();
+                newAddModal.hide();
+                render();
+            },
+            error: (error) => {
+                console.log(error)
+            }
+        }
+    )
+
+})
+//删除单机事件
+$('tbody ').on('click', '.del', function () {
+    const id = $(this).parent().data('id');
+    if (!confirm('是否要删除')) {
+        return 0;
+    } else {
+        $.ajax({
+            url: 'https://hmajax.itheima.net/api/books/' + id,
+            type: 'delete',
+            success: () => {
+                render();
+            },
+            error: (error) => {
+                console.log(error);
+            }
+        })
+    }
+}).on('click', '.edit', function () {
+    const id = $(this).parent().data('id');
+    const editModal = $('.edit-modal');
+    const newModal = new bootstrap.Modal(editModal);
+    newModal.show();
+    const form = $('.edit-form')[0];
+    $.ajax({
+        url: 'https://hmajax.itheima.net/api/books/' + id,
+        type: 'get',
+        success: (result) => {
+            const {bookname, author, publisher} = result.data
+            $('.bookname')[1].value = bookname;
+            $('.author')[1].value = author;
+            $('.publisher')[1].value = publisher;
+        },
+        error: (error) => {
+            console.log(error)
+        }
+    })
+    $('.edit-btn').bind('click', () => {
+        const book = serialize(form, {hash: true, empty: true});
+        console.log(book)
+        $.ajax({
+            url: "https://hmajax.itheima.net/api/books/" + id,
+            type: 'put',
+            data: {
+                creator,
+                ...book,
+            },
+            success: () => {
+                newModal.hide();
+                render();
+            },
+            error: (error) => {
+                console.log(error)
+            }
+        })
+    })
+})
+```
+
+```html
+const sliderData = [
+    {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)'},
+]
+
+
+function getSliderData(index) {
+    let newIndex = index % sliderData.length;
+    let a = sliderData[newIndex % sliderData.length];
+    $('.slider-wrapper img')[0].src = a.url;
+    $('.slider-footer p')[0].innerHTML = a.title;
+    $('.slider-footer')[0].style.backgroundColor = a.color;
+    $('.slider-indicator .active')[0].classList.remove('active');
+    $('.slider-indicator li')[newIndex].classList.add('active');
+}
+
+let index = 0;
+
+let interval = setInterval(function () {
+    getSliderData(index);
+    index++;
+}, 1000)
+function prev() {
+    index--;
+    if (index <= 0) {
+        index = sliderData.length
+    }
+    getSliderData(index);
+}
+
+function next() {
+    index++;
+    getSliderData(index);
+}
+
+
+$('.toggle').on('click', '.prev', function () {
+    prev();
+}).on('click', '.next', function () {
+    next();
+})
+
+$('tbody').ready(
+    $('.slider').mouseenter(function (){
+        console.log(123)
+        clearInterval(interval);
+}).mouseleave(function (){
+        interval=setInterval(function () {
+            index++;
+            getSliderData(index);
+        }, 1000)
+    }));
+```
\ No newline at end of file
-- 
Gitee