js学习1

js实现简单交互

js的外联引入

必须在body里&&你需要交互的元素下方
e.g.

<body>
    <div id="box">演示1</div>
    <script src="./演示1.js"></script>
</body>

实现点击交互 样例1

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示1</title>
</head>
<link rel="stylesheet" href="./演示1.css">

<body>
    <div id="box">演示1</div>
    <script src="./演示1.js"></script>
</body>
</html>

.change{
    width: 200px;
    height: 200px;
    background-color: rgb(95, 195, 72);
    color: #fff;
    text-align: center;
    transition: all 1s;
}

box.onclick = function (){
    this.innerText = '新的内容'
    this.className = 'change'
}

简而言之就是我写一个css，用js实现点击之后出现css

实现点击交互 样例2

img
img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./演示1.css">
</head>
<body>
    <div class="container">
        <div class="item" id="q1">1</div>
        <div class="item" id="q2">2</div>
        <div class="item" id="q3">3</div>
        <div class="item" id="q4">4</div>
        <div class="item" id="q5">5</div>
        <div class="item" id="q6">6</div>
        <div class="item" id="q7">7</div>
        <div class="item" id="q8">8</div>
        <div class="item" id="q9">9</div>
    </div>
    <script src="./演示1.js"></script>
</body>
</html>


.container {
    display: flex;
    height: 900px;  
    width: 900px;
    /* align-items:flex-start;  */
    /* 垂直居中 */
    /* justify-content: center; */
    background-color: rgba(115, 106, 106, 0.743);
    flex-direction: row;
    margin: auto;
    flex-wrap: wrap;
}
.item {
    background-color: cornflowerblue;
    width: 170px;
    height: 170px;
    border: 2px solid;
    margin:5% 6%; 
}
.change{
    /* position:relative; */
    display: flex;
    width: 170px;
    height: 170px;
    border: 2px solid;
    margin:5% 6%; 
    background-color: rgb(255, 253, 251);
    color: #161515dd;
    /* text-align: center; */
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    font-size: 20px;
}

q1.onclick = function (){
    this.innerText = '希'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}
q3.onclick = function (){
    this.innerText = '你'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}
q4.onclick = function (){
    this.innerText = '十'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}
q5.onclick = function (){
    this.innerText = '月'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}
q2.onclick = function (){
    this.innerText = '望'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}
q6.onclick = function (){
    this.innerText = '万'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}
q7.onclick = function (){
    this.innerText = '事'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}                   
q8.onclick = function (){
    this.innerText = '胜'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}
q9.onclick = function (){
    this.innerText = '意'
    // 标签中的内容
    this.className = 'change'
    // 类名切换
}

一些问题

Q1. 设置点击前后的padding数据一样为什么点击后出现位移？
A1. 因为前后的content不一样，而padding并没有把盒子固定死，实际开发中还是设置width和height好，可以把盒子大小固定死，padding只适用于微调
Q2. 点击后的文字怎么都不竖直水平居中咋回事？
A2.css的flex记混了

    align-items: center;
    /* 竖直居中 */
    justify-content: center;
    /* 水平居中 */
<!-- 两者一起是的文字出现在正中间 -->

Q3局限性：这种做法只能将html相应盒子都写个id，而id具有唯一性，会使得同样的动作重复书写多次，代码冗杂，且必须使用类名转换
A3：还是要学习点js语法

点击事件的语法

有机会再学

js实现轮播效果

img

html 部分

实现N个图片轮播
1.有一个大盒子，大盒子里面放N个小盒子，且设置各自的类名
2.设置按钮，包装在button里

❮ 左箭头
❯ 右箭头

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./演示1.css">
</head>
<body>
    <div class="slider">
        <div class="slide slider1"></div>
        <div class="slide slider2"></div>
        <div class="slide slider3"></div>
        <!-- 添加左右箭头 -->
        <button class="prev">&#10094;</button>
        <!-- &#10094;：这是一个HTML实体，代表一个左箭头（←）。 -->
        <button class="next">&#10095;</button>
        <!-- &#10095;：这也是一个HTML实体，代表一个右箭头（→）。 -->
      </div>
      <script src="./演示1.js"></script>
</body>
</html>

css部分

.slider {
position: relative;
 /* 非static，便于子级元素绝对定位 */
width: 300px;
height: 300px;
overflow: hidden;
/* 还是有必要的，虽然注释了问题也不大 */
/* 剪裁内容：当元素设置了overflow: hidden;属性后，如果内容超出了元素的尺寸，超出部分将不会显示。这意味着，无论内容多大，它都不会溢出元素的边界，而是被隐藏。 */
/* 防止滚动条出现：通常，当内容超出元素的尺寸时，浏览器会自动添加滚动条以便用户滚动查看隐藏的内容。但是，如果应用了overflow: hidden;，即使内容溢出，也不会出现滚动条。 */
}
.slide {
position: absolute;
width: 100%;  
height: 100%;
/* 这个是相较父级元素而言的 */
background-size: cover;
background-position: center;
/* 展示的图片是正中央 */
}
/* 小结：制作轮播图/想要图片出现在一个固定大小的地方，我们选择设置一个父元素，框住图片&&非static的position，再给子级元素一个绝对定位，设置长高占比100% ,也方便按钮定位哈哈哈*/

.slider1{
    background-image: url('../登录页面/登录一/background-login1.jpg');
}
.slider2{
    background-image: url('../登录页面/登录一/background-login2.jpg');
}
.slider3{
    background-image: url('../华为2/华为2.0.img/menu2.jpg.webp');
}
/* 这三个class【id也可】来引入不同的图片，防止铺盖 */

.prev, .next {
position: absolute;
top: 50%;
/* 我滴天，top原来不等于margin-top呀 */

/* 设置绝对定位之后，%n都是相对于父级元素 */
transform: translateY(-50%);
background-color: #fff;
border: none;
/* 移除按钮的边框 */
cursor: pointer;
}
.prev { left: 10px; }
/* 调节按钮左右位置 */
/* 将上一个按钮的左侧边缘放置在父元素左侧10像素的位置 */
.next { right: 10px; }
/* 将下一个按钮的右侧边缘放置在父元素右侧10像素的位置 */

js部分

let currentIndex = 0;   
// 变量初始化，一般用let const
const slides = document.querySelectorAll('.slide');
// 获取所有带'class'.slide的选择器
const totalSlides = slides.length;
// 获取幻灯片总数
function showSlide(index) {
  // 定一个函数来显示指定索引的幻灯片
  slides.forEach((slide) => {
// 遍历所有幻灯片
    slide.style.display = 'none'; // 隐藏所有幻灯片
  });
  slides[index].style.display = 'block'; // 显示当前幻灯片
} 

function nextSlide() {
  // 定义一个函数来切换到下一张幻灯片
  currentIndex = (currentIndex + 1) % totalSlides; // 计算下一张幻灯片的索引，使用取模运算符循环回到第一张
  showSlide(currentIndex);
  // 显示下一张幻灯片
}

function prevSlide() {
  // 定义函数切换到上一张幻灯片的索引，使用取模运算符循环到最后一张
  currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; // 计算上一张幻灯片的索引
  计算上一张幻灯片
  showSlide(currentIndex);
  // 显示上一张幻灯片
}

// 初始化显示第一张幻灯片
showSlide(currentIndex);
// 调用showSlide函数显示当前索引的幻灯片，即第一张

// 为左右箭头添加事件监听
document.querySelector('.next').addEventListener('click', nextSlide);
// 当点击.next按钮时，调用nextSlide函数
document.querySelector('.prev').addEventListener('click', prevSlide);
// 当点击.prev按钮时，调用prevSlide函数
// 设置自动轮播
setInterval(nextSlide, 3000); // 每3秒切换到下一张幻灯片
// 使用setInterval函数每3000毫秒（3秒），调用一次nextSlide函数，实现自动轮播

AI分析js

let currentIndex = 0;

这行代码声明了一个名为 currentIndex 的变量，并将其初始化为 0。这个变量用来跟踪当前显示的幻灯片的索引。

const slides = document.querySelectorAll('.slide');

这行代码声明了一个常量 slides，它包含了页面上所有带有 .slide 类的元素。**document.querySelectorAll **是一个方法，用于选择文档中所有匹配指定选择器的元素。

const totalSlides = slides.length;

这行代码声明了一个常量 totalSlides，并将其设置为 slides 数组（或节点列表）的长度，即幻灯片的总数。

function showSlide(index) { ... }
这是一个名为 showSlide 的函数，它接受一个参数 index。这个函数的作用是显示索引为 index 的幻灯片，并隐藏其他所有幻灯片。

slides.forEach((slide) => { ... });

这行代码使用了forEach 方法来遍历slides 数组中的每个元素。对于每个元素（在这里叫做 slide），它

slide.style.display = 'none'; 和 slides[index].style.display = 'block';

这些代码行用来设置幻灯片的 display CSS属性。第一行隐藏所有幻灯片（设置为 ‘none’），第二行显示当前索引的幻灯片（设置为 ‘block’）。

function nextSlide() { ... } 和 function prevSlide() { ... }

这两个函数分别用来切换到下一张和上一张幻灯片。它们通过修改 currentIndex 的值来实现这一点。

currentIndex = (currentIndex + 1) % totalSlides; 和 currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;

这些代码行用来更新 currentIndex 的值。使用

document.querySelector('.next').addEventListener('click', nextSlide); 和 document.querySelector('.prev').addEventListener('click', prevSlide);

这两行代码为 .next 和 .prev 类的按钮添加了点击事件监听器。当这些按钮被点击时，会分别调用 nextSlide 和 prevSlide 函数。

setInterval(nextSlide, 3000);

这行代码设置了一个定时器，每3000毫秒（即3秒）调用一次 nextSlide 函数，从而实现自动轮播效果。

纸上得来终觉浅，绝知此事要躬行

项目实践

我把选择器名字改了自己实现深入理解一下
ok啦
img

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./演示1.css">
</head>
<body>
    <div class="rollFather">
        <div class="rollSon rollSon1"></div>
        <div class="rollSon rollSon2"></div>
        <div class="rollSon rollSon3"></div>
        <div class="rollSon rollSon4"></div>
        <div class="rollSon rollSon5"></div>
        <div class="rollSon rollSon6"></div>
        <div class="rollSon rollSon7"></div>
        <div class="rollSon rollSon8"></div>
        <!-- 添加左右箭头 -->
        <button class="arrowLeft">&#10094;</button>
        <!-- &#10094;：这是一个HTML实体，代表一个左箭头（←）。 -->
        <button class="arrowRight">&#10095;</button>
        <!-- &#10095;：这也是一个HTML实体，代表一个右箭头（→）。 -->
      </div>
      <script src="./演示1.js"></script>
</body>      
</html>

*{
    padding: 0;
    margin: 0;
}
.rollFather{
    height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
    top: 190px;
}
.rollSon{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.rollSon1{
    background-image: url(../华为2/华为2.0.img/menu1.jpg);
}
.rollSon2{
    background-image: url(../华为2/华为2.0.img/menu2.jpg.webp);
}
.rollSon3{
    background-image: url(../华为2/华为2.0.img/menu3.jpg);
}
.rollSon4{
    background-image: url(../华为2/华为2.0.img/menu4.jpg);
}
.rollSon5{
    background-image: url(../华为2/华为2.0.img/menu5.jpg);
}
.rollSon6{
    background-image: url(../华为2/华为2.0.img/menu6.jpg);
}
.rollSon7{
    background-image: url(../华为2/华为2.0.img/menu7.jpg);
}
.rollSon8{
    background-image: url(../华为2/华为2.0.img/menu8.jpg);
}

.arrowLeft, .arrowRight{
    position: absolute;
    top: 50%;
    background-color: #fff;
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
}
.arrowLeft{
    left: 10px;
}
.arrowRight{
    right: 10px;
}

let a = 0;
// a是一个变量，表示当前的rollSon元素，变量初始化
const b = document.querySelectorAll('.rollSon');
// b是一个常量,收集所有rollerSon选择器的元素
const c = b.length;
// c是一个常量,就是指幻灯片的总数量
function showSlide(index) {
  // 定一个函数来显示指定索引的幻灯片
b.forEach((rollSon) => {
// 遍历所有幻灯片
rollSon.style.display = 'none'; // 隐藏所有幻灯片
});
  b[index].style.display = 'block'; // 显示当前幻灯片
} 

function arrowLeft() {
// 定义函数切换到上一张幻灯片的索引，使用取模运算符循环到最后一张
if (a>0){
    a--;
}else{
    a=c-1;
}
showSlide(a);
// 显示上一张幻灯片
}

function arrowRight() {
// 定义一个函数来切换到下一张幻灯片
if (a<c-1){
    a++;
} else{
    a=0;
}
showSlide(a);
// 显示下一张幻灯片
}

/// 初始化显示第一张幻灯片
showSlide(a);
// 调用showSlide函数显示当前索引的幻灯片，即第一张

/// 为左右箭头添加事件监听
document.querySelector('.arrowRight').addEventListener('click',arrowRight);
// 当点击按钮时启用函数
document.querySelector('.arrowLeft').addEventListener('click', arrowLeft);
// 当点击按钮时启用函数

/// 设置自动轮播
setInterval(arrowRight, 3000); 
// 使用setInterval函数每3000毫秒（3秒），调用一次arrowRight函数，实现自动轮播

js实现鼠标移走后相应时间仍然显示&&css实现鼠标悬停展示隐藏菜单

AI实现项目1

alt textimg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Example</title>
<link rel="stylesheet" href="./演示1.css">
</head>
<body>

<div class="button">
    <img src="../话伪/right.png" alt="Button">
    <div class="overlay">
        <div class="menu-item"><a href="#">Link 1</a></div>
        <!-- 其他内容 -->
    </div>
</div>

<script src="./演示1.js"></script>
</body>
</html>


    .button img {
        height: 20px;
        width: 20px;
        position: relative;
    }
    
    .overlay {
        background-color: rgb(106, 149, 201);
        margin: 20px 200px;
        height: 600px;
        width: 400px;
        font-size: 16px;
        color: #c7bebe8f;
        position: absolute;
        display: none;
        /* pointer-events: auto; */
    }
    
    .menu-item {
        height: 50px;
        width: 60px;
        padding: 2px;
        margin: 30px 50px;
    }
    
    .overlay a:hover {
        background-color: #c31212;
    }

document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('.button');
    // 使用document.querySelectorAll选择页面上所有具有类名.button的元素，并存储在一个名为buttons的变量中。
    buttons.forEach(function(button) {
         // 使用forEach方法遍历buttons数组中的每一个元素（在这里称为button）。
        let overlay = button.querySelector('.overlay');
        // 对于每个.button元素，找到它的第一个具有类名.overlay的子元素，并将其存储在变量overlay中。
        let timeout;
        // 声明一个变量timeout，稍后我们将用它来存储一个定时器的引用。
        button.addEventListener('mouseenter', function() {
        // 当鼠标悬停在.button元素上时，执行一个函数。
            clearTimeout(timeout);
        // clearTimeout(timeout);用来清除任何已经设置的定时器。   
            overlay.style.display = 'block';
        //  将.overlay元素的display样式设置为block，使其可见。
        });

        button.addEventListener('mouseleave', function() {
        // 当鼠标离开.button元素时，执行一个函数。
            timeout = setTimeout(function() {
        // 设置一个定时器，
                overlay.style.display = 'none';
            }, 500);
         // 500毫秒后执行一个函数，该函数将.overlay元素的display样式设置为none，使其隐藏。
        });

        overlay.addEventListener('mouseenter', function() {
            // 当鼠标悬停在.overlay元素上时，执行一个函数。  
            clearTimeout(timeout);
            // 在这个函数中，clearTimeout(timeout);用来清除任何已经设置的定时器，这样.overlay就不会在鼠标悬停时隐藏。
        });

        overlay.addEventListener('mouseleave', function() {
            // 当鼠标离开.overlay元素时，执行一个函数。
            overlay.style.display = 'none';
            // 将.overlay元素的display样式设置为none，使其隐藏。
        });
    });
});

老规矩，自己动手实现

项目二--初识

预览

img
img

源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Example</title>
<link rel="stylesheet" href="./演示1.css">
</head>
<body>

<div class="button">
    <img src="../话伪/搜索矢量图.png" alt="Button">
    <div class="over">
        <a href="https://www.vmall.com/portal/category/?targetRoute=CategoryList&tagid=TAG1143&categoryName=%25E6%2589%258B%25E6%259C%25BA&prdName=Mate%2520%25E7%25B3%25BB%25E5%2588%2597&secondTagid=TAG1157&searchResultPageProdShow=true&searchHistoryShow=true" target="_blank">
            <img src="../话伪/menu-under1.png" alt="一张图片">
            <span>Mate系列</span>
        </a>
        <a href="https://www.vmall.com/portal/category/?targetRoute=CategoryList&tagid=TAG8690&categoryName=%25E6%2589%258B%25E6%259C%25BA&prdName=%25E5%258D%258E%25E4%25B8%25BA%25E5%25AE%2598%25E6%2596%25B9%25E7%25BF%25BB%25E6%2596%25B0&secondTagid=TAG1157&searchResultPageProdShow=true&searchHistoryShow=true" target="_blank">
            <img src="../话伪/menu-under4.png" alt="一张图片">
            <span>Pura系列</span>
        </a>
        <a href="https://www.vmall.com/portal/category/?targetRoute=CategoryList&tagid=TAG1142&categoryName=%25E6%2589%258B%25E6%259C%25BA&prdName=Pura%2520%25E7%25B3%25BB%25E5%2588%2597&secondTagid=TAG1157&searchResultPageProdShow=true&searchHistoryShow=true" target="_blank">
            <img src="../话伪/menu-under2.png" alt="一张图片">
            <span>nova系列</span>
        </a>
        <a href="https://www.vmall.com/portal/category/?targetRoute=CategoryList&tagid=TAG8707&categoryName=%25E6%2589%258B%25E6%259C%25BA&prdName=Pocket%2520%25E7%25B3%25BB%25E5%2588%2597&secondTagid=TAG1157&searchResultPageProdShow=true&searchHistoryShow=true" target="_blank">
            <img src="../话伪/menu-under7.png" alt="一张图片">
            <span>华为畅想系列</span>
        </a>
    </div>
</div>

<script src="./演示1.js"></script>
</body>
</html>


*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: aliceblue;
}
/* .button{
    background-color: aqua;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 10%;
} */
.button img{
    height: 30px;
    width: 30px;
    position: absolute;
    margin-left: 500px;
    margin-top: 200px;
}
.over{
    background-color: aquamarine;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 10%;
    left: 5%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;


}
.over img{
    height: 50px;
    width: 80px;
    /* margin: auto; */
    margin-left: 35px;
    margin-top: 25%;
    
    /* left: 5px; */
    /* position:static; */
    /* position: absolute; */
    /* 父级设置，子级就会继承，无需重复设置 */
}
/* .over:hover{
        transform: translateX(100px);
} */
.over span{
    display: block;
    flex-direction: row;
    /* flex-wrap: wrap; */
    /* 父级设置，子级就会继承，无需重复设置 */
    padding: 30px;
    margin-top: 4px;
    margin-left: 3px;
    color: black;
}
.over span:hover{
    color: red;
}

document.addEventListener('DOMContentLoaded', function() {
    let a = document.querySelectorAll('.button');
    a.forEach(function(button) {
        let over = button.querySelector('.over');
        let timeout;

        // 当鼠标进入按钮时
        button.addEventListener('mouseenter', function() {
            clearTimeout(timeout);
            over.style.display = 'flex';
        });

        // 当鼠标离开按钮时
        button.addEventListener('mouseleave', function() {
            timeout = setTimeout(function() {
                over.style.display = 'none';
            }, 500);
        });

        // 当鼠标进入覆盖层时，防止覆盖层消失
        over.addEventListener('mouseenter', function() {
            clearTimeout(timeout);
        });

        // 当鼠标离开覆盖层时，设置覆盖层消失的延时
        over.addEventListener('mouseleave', function() {
            timeout = setTimeout(function() {
                over.style.display = 'none';
            }, 500);
        });
    });
});

一些问题

  1. html里面，把图片的地址引入到超链接里了
    【还是对两者的引入字母不熟悉 a 是hrefimg 是src，就是引入路径就是src，引入其他链接就是href】
  2. span本身不可以用弹性布局，必须改成块元素
    复习元素常见的css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Style Example</title>
<style>
    .custom-span {
        font-family: 'Arial', sans-serif; /* 字体 */
        font-size: 18px; /* 字号 */
        font-weight: bold; /* 加粗 */
        color: blue; /* 颜色 */
        background-color: yellow; /* 背景颜色 */
        padding: 5px; 
        /* 调节自己文字和border间的距离【黄色区域大小】 */
        /* 内边距 */
        border: 1px solid red; /* 边框 */
        border-radius: 5px; /* 圆角 */
        margin: 10px; 
        /* 调节与同级元素<p>间距 */
        /* 外边距 */
        display: inline-block; 
        /* 显示方式 */
        width: 100px; /* 宽度 */
        height: 30px; /* 高度 */
        /* 调节文本区域大小 */
        line-height: 30px;
         /* 段落间行高 */
        text-align: center; 
        /* 文本对齐 */
        vertical-align: middle; 
        /* 同级元素垂直中间对齐 */
        /* 垂直对齐 */
    }
</style>
</head>
<body>

<p>This is a <span class="custom-span">custom styled span</span> element.</p>

</body>
</html>

  1. 盒子布局能力还是弱
    总结;
    设置宽高
    设置背景颜色，调节margin和padding【position定位，flex布局】

  2. 设置js时，随心所欲，擅自改变标准类型事件
    自己用come和leave代替mouseenter 和 mouseleave 标准事件【鼠标接触/mouseenter，鼠标离开/mouseleave，标准事件类型不可以自定义】

  3. 设置完js后，开始设置的隐藏菜单布局变了？
    无脑套AI，用的是display：flex设置的菜单，交互时应该属性改成flex而不是block

3

实现网站导航

img
img

源码【忽略超链接】

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站导航</title>
    <link rel="stylesheet" href="./演示1.css">
</head>
<body>
    <div class="arrowTop">
        <span>网站导航</span>
        <img src="../话伪/上箭头.png" alt="一个向上的矢量图" class="arrowToppng">
        <div class="navOver">
            <img src="../话伪/首页.png" alt="一张首页图片">
            <ul class="lineOne">
                <li>频道</li>
                <li>产品</li>
                <li>增值服务</li>
                <li>会员</li>
                <li>商城公告</li>
            </ul>
            <div class="blockTotal">
                <div class="block1">
                    <!-- <li> -->
                        <a href="" target="_blank">智慧办公</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="" target="_blank">智能家居</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="" target="_blank">鸿蒙智行</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="" target="_blank">华为手机</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="" target="_blank">影音娱乐</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="" target="_blank">运动健康</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="" target="_blank">教育购</a>
                    <!-- </li> -->
                </div>
                <div class="block2">
                    <a href="" target="_blank">手机</a>
                    <a href="" target="_blank">穿戴</a>
                    <a href="" target="_blank">平板</a>
                    <a href="" target="_blank">电脑</a>
                    <a href="" target="_blank">耳机音箱</a>
                    <a href="" target="_blank">智慧屏</a>
                    <a href="" target="_blank">智能家居</a>
                    <a href="" target="_blank">出行车品</a>
                    <a href="" target="_blank">数码配件</a>
                    <a href="" target="_blank">生态周边</a>
                </div>
                <div class="block3">
                    <a href="" target="_blank">手机服务</a>
                    <a href="" target="_blank">电脑平板服务</a>
                    <a href="" target="_blank">音频服务</a>
                    <a href="" target="_blank">智慧屏服务</a>
                    <a href="" target="_blank">穿戴服务</a>
                    <a href="" target="_blank">其他服务</a>
                    <a href="" target="_blank">以旧换新</a>
                    <a href="" target="_blank">补购服务</a>
                </div>
                <div class="block4">
                    <a href="" target="_blank">会员频道</a>
                </div>
                <div class="block5">
                    <a href="" target="_blank">商城公告</a>
                </div>
            </div>
        </div>
    <script src="./演示1.js"></script>
    </div >

</body>
</html>

*{
    margin: 0;
    padding: 0;
    /* background-color: bisque; */
}
a{
    text-decoration: none;
    color: aliceblue;
    display: block;
    cursor: pointer;
    /* !!!!!! */
}
a:hover{
    color: red;

}
ul{
    /* text-decoration: none; */
    list-style: none;
    color: black;
    /* background-color: aqua; */
}
.lineOne{
    display: line;
    
    /* position: relative; */
}
.lineOne li{
    flex-direction: row;
    display: inline;
    font-weight: bolder;
    position: relative;
    top: 30px;
    /* left: 30px; */
    padding-left:100px ;
    /* justify-content: space-between; */
    /* align-items: baseline; */
    /* align-items: center;/ 垂直居中对齐 */
}
.lineOne li:first-child{
    padding-left: 10px   ;
}
.lineOne li:last-child{
    right: -30px   ;
}
.navOver{
    display: flex;
    height: 400px;
    width: 900px;
    position: absolute;
    margin: 50%;
    background-color: #fff;
    
}
.navOver img{
    width: 45px;
    height: 45px;
    margin: 40px;
    /* align-items: center; 垂直居中对齐 */
}
.arrowTop{
    display: flex;
    background-color: rgb(36, 162, 215);
    margin: 10px 50px;
    width: 100px;
    height: 20px;
    position: relative;
}
.arrowToppng{
    height: 20px;
    width: 20px;
    /* background-color: aqua; */
    margin:0.1px  78px;
}
.arrowTop span{
    font-size: 12px;
    display: block;
    flex-direction: row;
    position: absolute;
    margin-left: 15px;
}
.blockTotal{
    /* position: relative; */
    /* background-color: aquamarine; */
    height: 80%;
    width: 87.7%;
    left: 110px;
    top: 80px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    position: absolute;
    /* align-items:center; */
}
.block1{
    display: flex;
    /* position: relative; */
    /* display: inline-block; */
    align-content: space-between;
    flex-wrap: wrap;
    /* flex-direction: row; */
    /* !!!!! 使得文字横着排版 */
    width: 15%;
    height: 80%;
    padding-right: 30px;
    /* background-color: rgb(222, 110, 30); */

}
.block1 a{
    /* position: absolute; */
    padding: 5px;
    color: black;
    /* display: block; */
    flex-wrap: wrap;
    flex-direction: row;
    font-size: 10px;
    display: inline-block;
    /* !!!!! 使得每个a文字可以调节距离*/
    
}
.block2{
    display: flex;
    /* position: relative; */
    /* display: inline-block; */
    align-content: space-between;
    flex-wrap: wrap;
    /* flex-direction: row; */
    /* !!!!! 使得文字横着排版 */
    width: 15%;
    height: 80%;
    padding-right: 30px;
    /* background-color: rgb(212, 179, 34); */

}
.block2 a{
    /* position: flex; */
    padding: 5px;
    color: black;
    /* display: block; */
    flex-wrap: wrap;
    flex-direction: row;
    font-size: 10px;
    display: inline-block;
    /* !!!!! 使得每个a文字可以调节距离*/
    /* margin: 20px 1px; */
}
.block3{
    display: flex;
    /* position: relative; */
    /* display: inline-block; */
    align-content: space-between;
    flex-wrap: wrap;
    /* flex-direction: row; */
    /* !!!!! 使得文字横着排版 */
    width: 18%;
    height: 80%;
    padding-right: 30px;
    /* background-color: rgb(80, 186, 23); */

}
.block3 a{
    /* position: absolute; */
    padding: 5px;
    color: black;
    /* display: block; */
    flex-wrap: wrap;
    flex-direction: row;
    font-size: 10px;
    display: inline-block;
    /* !!!!! 使得每个a文字可以调节距离*/
    /* margin: 30px 10px; */
}
.block4{
    display: flex;
    /* position: relative; */
    display: inline-block;
    /* !!!!! 使得文字横着排版 */
    width: 8%;
    height: 80%;
    padding-right: 100px;
    /* background-color: rgb(25, 138, 236); */

}
.block4 a{
    /* position: absolute; */
    padding: 5px;
    color: black;
    /* display: block; */

    font-size: 10px;
    display: inline-block;
    /* !!!!! 使得每个a文字可以调节距离*/
    /* margin: 30px 10px; */
}
.block5{
    display: flex;
    /* position: relative; */
    display: inline-block;
    /* !!!!! 使得文字横着排版 */
    width: 8%;
    height: 80%;
    padding-right: 80px;
    /* background-color: rgb(221, 34, 234); */

}
.block5 a{
    /* position: absolute; */
    padding: 5px;
    color: black;
    /* display: block; */
    font-size: 10px;
    display: inline-block;
    /* !!!!! 使得每个a文字可以调节距离*/
    /* margin: 30px 10px; */
}


document.addEventListener('DOMContentLoaded', function() {
    let a = document.querySelectorAll('.arrowTop');
    a.forEach(function(button) {
        let over = button.querySelector('.navOver');
        let timeout;

        // 当鼠标进入按钮时
        button.addEventListener('mouseenter', function() {
            clearTimeout(timeout);
            over.style.display = 'flex';
        });

        // 当鼠标离开按钮时
        button.addEventListener('mouseleave', function() {
            timeout = setTimeout(function() {
                over.style.display = 'none';
            }, 500);
        });

        // 当鼠标进入覆盖层时，防止覆盖层消失
        over.addEventListener('mouseenter', function() {
            clearTimeout(timeout);
        });

        // 当鼠标离开覆盖层时，设置覆盖层消失的延时
        over.addEventListener('mouseleave', function() {
            timeout = setTimeout(function() {
                over.style.display = 'none';
            }, 500);
        });
    });
});

这里使用< ul>< li>

列出无序列表项：当你需要列出一系列项目，而这些项目的顺序并不重要时,可以使用< ul>和< li>
例如列出菜单选项、购物清单、任务列表等。
组织内容：< ul>和< li>可以用来组织页面上的相关内容，使这些内容在视觉上呈现为一个集合，便于用户理解和浏览。
以下是一些具体的场景，在这些场景下你会选择使用

    和
  • ：


    导航菜单：网站顶部或侧边的导航菜单通常使用无序列表来组织链接。
    选项列表：表单中的下拉菜单或单选/复选框列表。
    步骤说明：指导用户完成一系列步骤时，每一步可以用列表项来表示。
    商品分类：电子商务网站中的商品分类列表。
    文章目录****：文章或文档中的目录，虽然通常是按顺序排列的，但如果顺序不重要，也可以使用无序列表。

CONCLUDE:

写了这么多的 隐藏 + 鼠标悬浮展示 + 延时消失，也该总结点东西

  1. HTML 部分
    两个部分，A未悬浮时，B悬浮时
  2. 重点是调节B相对于A的位置
  3. 控制B在A处有鼠标时展示且有时间长度来执行操作

搜索动画[点击页面,出现新的菜单]

AI生成效果

alt textimg
alt textimg

代码1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click to Animate</title>
<link rel="stylesheet" href="./演示1.css">
</head>
<body>

<button id="animate-btn">点击我出现动画</button>
<div id="animated-element" class="hidden">这是一个动画元素</div>

<script src="./演示1.js"></script>
</body>
</html>


.hidden {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  
  .show {
    display: block;
    opacity: 1;
  }

// 获取按钮和动画元素
var animateBtn = document.getElementById('animate-btn');
var animatedElement = document.getElementById('animated-element');

// 为按钮添加点击事件监听器
animateBtn.addEventListener('click', function(event) {
    // 阻止事件冒泡到文档
    event.stopPropagation();
    
    // 切换动画元素的显示和隐藏
    if (animatedElement.classList.contains('hidden')) {
        animatedElement.classList.remove('hidden');
        animatedElement.classList.add('show');
    } else {
        animatedElement.classList.remove('show');
        animatedElement.classList.add('hidden');
    }
});

// 为整个文档添加点击事件监听器
document.addEventListener('click', function() {
    // 隐藏动画元素
    animatedElement.classList.remove('show');
    animatedElement.classList.add('hidden');
});

分析1

html

1.有点忘记了,看一下仅html效果
alt textimg

    <input type="text" id="search-input" placeholder="输入搜索内容">
    <!-- input标签可以引入一个长矩形,placeholder里面放提示文字 -->

2.id不可以和class一样
3.突然发现早就实现过这个项目了,js原理就是控制css切换类名,实现hidden和show

返回顶部

AI代码实现

alt textimg
alt textimg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>返回顶部</title>
<link rel="stylesheet" href="./演示1.css"> <!-- 引用外部CSS文件 -->
</head>
<body>

<div class="other">1</div>

<button id="back-to-top">返回顶部</button>

<script src="./演示1.js"></script> <!-- 引用外部JavaScript文件 -->
</body>
</html>

#back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    cursor: pointer;
}
.other{
    height: 1000000px;
    width: 100%;
    background-color: aqua;
}


document.addEventListener('DOMContentLoaded', function() {
    var backToTopBtn = document.getElementById('back-to-top');

    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 100) {
            backToTopBtn.style.display = 'block';
        } else {
            backToTopBtn.style.display = 'none';
        }
    });

    backToTopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});

js一些基础知识

  1. 变量声明
    变量用于存储数据，可以用 let、const 或 var 声明。
let name = "Alice";
const age = 25;

一般推荐使用 let 和const，因为它们提供更好的作用域控制。
var：可以在整个函数里使用，能被重新赋值，但在声明前使用会变成 undefined。

let：变量的值改变需要重复赋值，用let
var一般不用
const：当一个变量的值不会改变，用const
2. 数据类型
常见数据类型

  • 字符串（String）
  • 数字（int&&float）
  • 布尔值(boolean):true&&false
  • 数组(array)
[1, 2, 3]
  • 对象（object）：一组键值对000
{name : "Alice", age ；25}
  1. 函数
    函数是一组可重用的代码块，可以执行特定任务。
function greet() {
    console.log("Hello!");
}
greet(); // 调用函数
  1. 事件
    JS 可以响应用户的操作，例如点击按钮。
document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};
  1. 控制结构
    使用条件语句和循环来控制代码的执行流程。
if (age > 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}
  1. DOM操作000
    JS 可以与网页的结构（DOM）互动，例如更改文本或样式。
document.getElementById("myElement").innerText = "New text";
posted @ 2024-10-03 23:51  GJ504b  阅读(24)  评论(0)  编辑  收藏  举报