From 40d8f01deb7a9738bfa2d3f6f1691d00721a1060 Mon Sep 17 00:00:00 2001
From: yanshu <837955643@qq.com>
Date: Tue, 3 Jun 2025 14:43:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BB=84=E6=B4=81=2018873901200?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 huangjie.html | 289 ++++++++++++++++++++++++++++++++++++++++++++++++++
 huangjie.js   | 172 ++++++++++++++++++++++++++++++
 2 files changed, 461 insertions(+)
 create mode 100644 huangjie.html
 create mode 100644 huangjie.js
diff --git a/huangjie.html b/huangjie.html
new file mode 100644
index 0000000..d1ef4fd
--- /dev/null
+++ b/huangjie.html
@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>原生JS轮播图</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background-color: #f5f5f5;
+    }
+
+    .container {
+      position: relative;
+      width: 800px;
+      height: 400px;
+      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .slider {
+      display: flex;
+      height: 100%;
+      transition: transform 0.5s ease;
+    }
+
+    .slider-item {
+      min-width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 48px;
+      color: black;
+      font-weight: bold;
+    }
+
+    .arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 35px;
+      height: 72px;
+      background-color: rgba(92, 89, 89, 0.3);
+      color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-size: 24px;
+      z-index: 10;
+    }
+
+    .arrow:hover {
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    .arrow.prev {
+      left: 20px;
+    }
+
+    .arrow.next {
+      right: 20px;
+    }
+
+    .dots {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      z-index: 10;
+    }
+
+    .slider-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.5);
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+
+    .slider-dot.active {
+      background-color: white;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="slider">
+    </div>
+
+    <!-- 左右箭头 -->
+    <div class="arrow prev">❮</div>
+    <div class="arrow next">❯</div>
+
+    <!-- 小圆点 -->
+    <div class="dots">
+    </div>
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // 轮播图数据
+      const slides = [
+        { color: 'red', text: '1' },
+        { color: 'orange', text: '2' },
+        { color: 'yellow', text: '3' },
+        { color: 'green', text: '4' },
+      ];
+
+      // 获取DOM元素
+      const slider = document.querySelector('.slider');
+      const prevBtn = document.querySelector('.arrow.prev');
+      const nextBtn = document.querySelector('.arrow.next');
+      const dotsContainer = document.querySelector('.dots');
+
+      // 初始化变量
+      let currentIndex = 0;
+      let slideCount = slides.length;
+      let autoPlayInterval;
+      const autoPlayDelay = 2000; // 2秒自动轮播
+
+      // 创建轮播项
+      function createSlides() {
+        // 首部添加最后一个幻灯片的副本
+        const firstClone = createSlideElement(slides[slides.length - 1]);
+        slider.appendChild(firstClone);
+
+        // 添加所有幻灯片
+        slides.forEach(slide => {
+          slider.appendChild(createSlideElement(slide));
+        });
+
+        // 尾部添加第一个幻灯片的副本
+        const lastClone = createSlideElement(slides[0]);
+        slider.appendChild(lastClone);
+
+        // 更新slideCount
+        slideCount = slides.length + 2;
+
+        // 初始化位置（显示第一个真实幻灯片）
+        goToSlide(1, false);
+      }
+
+      // 创建单个幻灯片元素
+      function createSlideElement(slide) {
+        const slideElement = document.createElement('div');
+        slideElement.className = 'slider-item';
+        slideElement.style.backgroundColor = slide.color;
+        slideElement.textContent = slide.text;
+        return slideElement;
+      }
+
+      // 创建小圆点
+      function createDots() {
+        slides.forEach((el, index) => {
+          const dot = document.createElement('div');
+          dot.className = 'slider-dot';
+          if (index === 0) dot.classList.add('active');
+          dot.addEventListener('click', () => goToSlide(index + 1));
+          dotsContainer.appendChild(dot);
+        });
+      }
+
+      // 跳转到指定幻灯片
+      function goToSlide(index, animate = true) {
+        if (!animate) {
+          slider.style.transition = 'none';
+        } else {
+          slider.style.transition = 'transform 0.5s ease';
+        }
+
+        slider.style.transform = `translateX(-${index * 100}%)`;
+        currentIndex = index;
+
+        // 更新小圆点状态
+        updateDots();
+      }
+
+      // 更新小圆点状态
+      function updateDots() {
+        const dots = document.querySelectorAll('.slider-dot');
+        let dotIndex;
+
+        if (currentIndex === 0) {
+          dotIndex = slides.length - 1;
+        } else if (currentIndex === slideCount - 1) {
+          dotIndex = 0;
+        } else {
+          dotIndex = currentIndex - 1;
+        }
+
+        dots.forEach((dot, index) => {
+          dot.classList.toggle('active', index === dotIndex);
+        });
+      }
+
+      // 下一张幻灯片
+      function nextSlide() {
+        if (currentIndex >= slideCount - 1) return;
+        goToSlide(currentIndex + 1);
+
+        // 如果到达最后一个克隆幻灯片，无缝跳转到第一个真实幻灯片
+        if (currentIndex === slideCount - 1) {
+          setTimeout(() => {
+            goToSlide(1, false);
+          }, 500);
+        }
+      }
+
+      // 上一张幻灯片
+      function prevSlide() {
+        if (currentIndex <= 0) return;
+        goToSlide(currentIndex - 1);
+
+        // 如果到达第一个克隆幻灯片，无缝跳转到最后一个真实幻灯片
+        if (currentIndex === 0) {
+          setTimeout(() => {
+            goToSlide(slideCount - 2, false);
+          }, 500);
+        }
+      }
+
+      // 自动轮播
+      function startAutoPlay() {
+        autoPlayInterval = setInterval(nextSlide, autoPlayDelay);
+      }
+
+      // 停止自动轮播
+      function stopAutoPlay() {
+        clearInterval(autoPlayInterval);
+      }
+
+      // 初始化轮播图
+      function initSlider() {
+        createSlides();
+        createDots();
+        startAutoPlay();
+
+        // 添加事件监听器
+        nextBtn.addEventListener('click', () => {
+          stopAutoPlay();
+          nextSlide();
+          startAutoPlay();
+        });
+
+        prevBtn.addEventListener('click', () => {
+          stopAutoPlay();
+          prevSlide();
+          startAutoPlay();
+        });
+
+        // 鼠标悬停时暂停自动轮播
+        slider.addEventListener('mouseenter', stopAutoPlay);
+        slider.addEventListener('mouseleave', startAutoPlay);
+
+        // 监听过渡结束事件，处理无限轮播
+        slider.addEventListener('transitionend', () => {
+          if (currentIndex === 0) {
+            goToSlide(slideCount - 2, false);
+          } else if (currentIndex === slideCount - 1) {
+            goToSlide(1, false);
+          }
+        });
+      }
+
+      // 启动轮播图
+      initSlider();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/huangjie.js b/huangjie.js
new file mode 100644
index 0000000..b775724
--- /dev/null
+++ b/huangjie.js
@@ -0,0 +1,172 @@
+const cityData = [
+  {
+    parentValue: 1,
+    value: 11,
+    label: '北京市',
+  },
+  {
+    parentValue: 11,
+    value: 111,
+    label: '东城区'
+  },
+  {
+    parentValue: 11,
+    value: 112,
+    label: '西城区'
+  },
+  {
+    parentValue: 1,
+    value: 12,
+    label: '上海市',
+  },
+  {
+    parentValue: 12,
+    value: 121,
+    label: '黄浦区'
+  },
+  {
+    parentValue: 12,
+    value: 122,
+    label: '徐汇区'
+  },
+  {
+    parentValue: 1,
+    value: 13,
+    label: '广东省',
+  },
+  {
+    parentValue: 13,
+    value: 131,
+    label: '广州市',
+  },
+  {
+    parentValue: 131,
+    value: 1311,
+    label: '天河区'
+  },
+  {
+    parentValue: 131,
+    value: 1312,
+    label: '越秀区'
+  },
+  {
+    parentValue: 132,
+    value: 1321,
+    label: '南山区'
+  },
+  {
+    parentValue: 132,
+    value: 1322,
+    label: '罗湖区'
+  },
+  {
+    value: 1,
+    label: '中国',
+  },
+  {
+    parentValue: 13,
+    value: 132,
+    label: '深圳市',
+  }
+]
+
+/* *
+1.请利用递归方法实现一个函数，把上方数据递归成有层级的数据，
+2.把value字段变成id字段，label字段变成title字段，children字段变成child字段，
+3.去掉parentValue字段，最终得到以下数据。需要一模一样的数据
+⚠️注意：不允许使用三层循环，请使用递归方法
+[
+  {
+      id: 1,
+      title: '中国',
+      child: [
+          {
+              id: 11,
+              title: '北京市',
+              child: [
+                  {
+                      id: 111,
+                      title: '东城区'
+                  },
+                  {
+                      id: 112,
+                      title: '西城区'
+                  }
+              ]
+          },
+          {
+              id: 12,
+              title: '上海市',
+              child: [
+                  {
+                      id: 121,
+                      title: '黄浦区'
+                  },
+                  {
+                      id: 122,
+                      title: '徐汇区'
+                  }
+              ]
+          },
+          {
+              id: 13,
+              title: '广东省',
+              child: [
+                  {
+                      id: 131,
+                      title: '广州市',
+                      child: [
+                          {
+                              id: 1311,
+                              title: '天河区'
+                          },
+                          {
+                              id: 1312,
+                              title: '越秀区'
+                          }
+                      ]
+                  },
+                  {
+                      id: 132,
+                      title: '深圳市',
+                      child: [
+                          {
+                              id: 1321,
+                              title: '南山区'
+                          },
+                          {
+                              id: 1322,
+                              title: '罗湖区'
+                          }
+                      ]
+                  }
+              ]
+          }
+      ]
+  }
+]
+* */
+
+
+// 具体实现
+const getArea = (data, parentValue = 1) => {
+  // 在这里编写代码
+  // 找出当前层级的所有项
+  const currentLevelItems = data.filter(item => item.parentValue === parentValue);
+  return currentLevelItems.map(item => {
+    const newItem = {
+      id: item.value,
+      title: item.label,
+    }
+    // 对于子数组
+    const children = getArea(data, item.value);
+    if (children.length > 0) {
+      newItem.child = children;
+    }
+    return newItem;
+  })
+}
+const result = [{ id: 1, title: '中国', child: [] }];
+result[0].child = getArea(cityData);
+console.log(result);
+console.log(JSON.stringify(result, null, 2));
-- 
Gitee

