From ac888eb3e922452da68df85741c0143f9e22ae6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A8=8A=E5=B0=8F=E9=83=AD?= <2966479092@qq.com>
Date: Mon, 13 Nov 2023 18:08:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B9=9D=E6=AC=A1=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...04\347\233\221\345\220\254\345\231\250.md" | 421 ++++++++++++++++++
 1 file changed, 421 insertions(+)
 create mode 100644 "47 \346\250\212\345\260\217\351\203\255/20231109 JS\347\232\204\347\233\221\345\220\254\345\231\250.md"
diff --git "a/47 \346\250\212\345\260\217\351\203\255/20231109 JS\347\232\204\347\233\221\345\220\254\345\231\250.md" "b/47 \346\250\212\345\260\217\351\203\255/20231109 JS\347\232\204\347\233\221\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..b5d4bb0
--- /dev/null
+++ "b/47 \346\250\212\345\260\217\351\203\255/20231109 JS\347\232\204\347\233\221\345\220\254\345\231\250.md"	
@@ -0,0 +1,421 @@
+# 作业
+
+### 监听器
+```html
+<body>
+  <h3>事件监听</h3>
+  <p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
+  <button id="btn">点击改变文字颜色</button>
+  <script>
+    // 1. 获取 button 对应的 DOM 对象
+    let btn = document.querySelector('#btn');
+
+    // 2. 添加事件监听  add 添加 Event 事件 Listener  监听器
+    // 当btn这个对象，被click(单击)时，就执行function
+    btn.addEventListener('click',function(){
+      console.log('点击')
+    })
+   
+    // 什么是回调函数
+    //  functionA(functionB)
+
+    // 3. 只要用户点击了按钮，事件便触发了！！！
+
+    /* 
+    `addEventListener` 是 DOM 对象专门用来添加事件监听的方法
+   ，它的两个参数分别为【事件类型】和【事件回调】。
+   */
+
+   // 事件类型：鼠标事件，键盘事件，表单事件，焦点事件
+      
+   /* 
+    1.鼠标事件
+    click 单击
+    dblclick 双击 doubleClick
+    mouseenter 鼠标移入
+    mouseleave 鼠标离开
+
+    2.键盘事件
+    keyDown  键盘被按下
+    keyUp  键盘按下后被抬起
+
+    3.焦点事件
+    focus 获得焦点
+    flur 失去焦点 
+
+    4.表单事件
+    input 文本框输入事件
+   */
+  </script>
+</body>
+```
+
+```html
+<body>
+  <button>点击</button>
+  <script>
+    // 需求： 点击了按钮，弹出一个对话框
+    // 1. 事件源   按钮 
+    let btn  = document.querySelector('button');
+   
+    // 2.事件类型 点击鼠标   click 字符串
+    btn.addEventListener('click',function(){
+      
+      // 3. 事件处理程序 弹出对话框 
+      alert('点击');
+    })
+  </script>
+</body>
+```
+
+### 点击关闭
+
+```html
+<body>
+  <div class="box" >
+    我是广告
+    <div class="box1">X</div>
+  </div>
+  <button>切换</button>
+  <script>
+    // 1. 获取事件源，要被点击的那个对象 
+    let box1 = document.querySelector('.box1');
+    let box = document.querySelector('.box');
+    let btn = document.querySelector('button');
+      
+    //  关闭的是大盒子
+    box1.addEventListener('click',function(){
+      box.style.display = 'none';
+    })
+  
+    // 2. 事件侦听
+    btn.addEventListener('click',function(){
+      box.style.display = '';
+    })
+  </script>
+</body>
+```
+
+### 随机点名案例
+
+```html
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        h2 {
+            text-align: center;
+        }
+
+        .box {
+            width: 600px;
+            margin: 50px auto;
+            display: flex;
+            font-size: 25px;
+            line-height: 40px;
+        }
+
+        .qs {
+
+            width: 450px;
+            height: 40px;
+            color: red;
+
+        }
+
+        .btns {
+            text-align: center;
+        }
+
+        .btns button {
+            width: 120px;
+            height: 35px;
+            margin: 0 50px;
+        }
+    </style>
+<body>
+    <h2>随机点名</h2>
+    <div class="box">
+        <span>名字是：</span>
+        <div class="qs">这里显示姓名</div>
+    </div>
+    <div class="btns">
+        <button class="start">开始</button>
+        <button class="end">结束</button>
+    </div>
+    <script>
+        // 数据数组 代表要被抽取的名单
+        let arr = ['TXT','Straykids','ENHYPEN','ATEEZ','THEBOYZ','TREASURE']
+      
+        // 获取元素对象
+        let start = document.querySelector('.btns .start');
+        let end = document.querySelector('.btns .end');
+        let name = document.querySelector('.box .qs');
+        let timer = null;
+        let random = 0;
+
+        // 给开始按钮添加点击事件
+        start.addEventListener('click',function(){
+            timer = setInterval(function(){
+                random = Math.floor(Math.random()*(arr.length))
+                name.innerHTML = arr[random]
+            },50)
+        });
+
+        // 给结束按钮添加一个点击事件
+       end.addEventListener('click',function(){
+            clearInterval(timer);
+            arr.splice(random,1);
+            if(arr.length==0){
+                name.innerHTML='抽完了';
+            }
+       })
+    </script>
+</body>
+```
+
+oncilck 和 addEventListener 的区别
+
+```html
+<body>
+  <button class="a2">点击</button>
+  <script>
+    // 事件监听与onclick这种形式的区别
+    const btn = document.querySelector('button')
+
+    //   alert(11)
+    // }
+    // btn.onclick = function () {
+    //   alert(22)
+    // }
+
+    // // let num = 10
+    // // num = 20
+    // btn.addEventListener('click', function () {
+    //   alert(11)
+    // })
+    // btn.addEventListener('click', function () {
+    //   alert(22)
+    // })
+  </script>
+</body>
+```
+
+```html
+<body>
+  <div>111</div>
+  <script>
+    let div = document.querySelector('div');
+    // 单击
+    // div.addEventListener('click',function(){
+    //   document.write('单击');
+    // })
+   
+    // 双击
+    div.addEventListener('dblclick',function(){
+      document.write('双击');
+    })
+   
+    // 鼠标经过
+    // div.addEventListener('mouseenter',function(){
+    //   document.write('经过');
+    // })
+   
+    // 鼠标离开
+    div.addEventListener('mouseleave',function(){
+      document.write('离开');
+    })
+  </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" />
+  <title>轮播图点击切换</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+      width: 560px;
+      height: 400px;
+      overflow: hidden;
+    }
+
+    .slider-wrapper {
+      width: 100%;
+      height: 320px;
+    }
+
+    .slider-wrapper img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .slider-footer {
+      height: 80px;
+      background-color: rgb(100, 67, 68);
+      padding: 12px 12px 0 12px;
+      position: relative;
+    }
+
+    .slider-footer .toggle {
+      position: absolute;
+      right: 0;
+      top: 12px;
+      display: flex;
+    }
+
+    .slider-footer .toggle button {
+      margin-right: 12px;
+      width: 28px;
+      height: 28px;
+      appearance: none;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .slider-footer .toggle button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .slider-footer p {
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .slider-indicator {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      align-items: center;
+    }
+
+    .slider-indicator li {
+      width: 8px;
+      height: 8px;
+      margin: 4px;
+      border-radius: 50%;
+      background: #fff;
+      opacity: 0.4;
+      cursor: pointer;
+    }
+
+    .slider-indicator li.active {
+      width: 12px;
+      height: 12px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="slider">
+    <div class="slider-wrapper">
+      <img src="./images/slider01.jpg" alt="" />
+    </div>
+    <div class="slider-footer">
+      <p>对人类来说会不会太超前了？</p>
+      <ul class="slider-indicator">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev">&lt;</button>
+        <button class="next">&gt;</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 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 div = document.querySelector('.slider-footer');
+
+    // 定义相关的变量
+    let i=0;
+    let timer = null;
+
+    //先用定时器让其自动转换
+    timer = setInterval(function(){
+      i++;
+      i=i>=data.length?0:i;
+      change()
+    },1000)
+    function change() {
+      img.src=data[i].url;
+      p.innerHTML=data[i].title;
+      div.style.backgroundColor=data[i].color;
+      document.querySelector('.active')
+      let li = document.querySelector(`.slider-footer li:nth-child(${i+1})`);
+      document.querySelector('.active').classList.remove('active');
+      li.classList.add('active');
+    }
+    
+    // 鼠标移动到图片，就暂时滚动
+    img.addEventListener('mouseenter',function(){
+      clearInterval(timer);
+    })
+    img.addEventListener('mouseleave',function(){
+      timer = setInterval(function(){
+        i++;
+        i=i>=data.length?0:i;
+        change()
+      },1000)
+    })
+
+    // 下一页
+    let next = document.querySelector('.toggle .next')
+    next.addEventListener('click',function(){
+      i++;
+      i=i>=data.length?0:i;
+      change();
+    })
+
+    // 上一页
+    let prev = document.querySelector('.toggle .prev')
+    prev.addEventListener('click',function(){
+      i--;
+      i=i<0?data.length-1:i;
+      change();
+    })
+  </script>
+</body>
+</html>
+```
\ No newline at end of file
-- 
Gitee

