js学习1

标签：function js 学习华为 currentIndex background change 幻灯片

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

<!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实现轮播效果

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啦

<!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一些基础知识
1. 变量声明
变量用于存储数据，可以用 let、const 或 var 声明。
```javascript
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}

函数
函数是一组可重用的代码块，可以执行特定任务。

function greet() {
    console.log("Hello!");
}
greet(); // 调用函数

事件
JS 可以响应用户的操作，例如点击按钮。

document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};

控制结构
使用条件语句和循环来控制代码的执行流程。

if (age > 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

DOM操作000
JS 可以与网页的结构（DOM）互动，例如更改文本或样式。

document.getElementById("myElement").innerText = "New text";

标签：function,js,学习,华为,currentIndex,background,change,幻灯片
From： https://www.cnblogs.com/GJ504b/p/18446160

js实现简单交互

js的外联引入

实现点击交互样例1

实现点击交互样例2

一些问题

点击事件的语法

js实现轮播效果

html 部分

css部分

js部分

AI分析js

项目实践

相关文章

赞助商

阅读排行

js学习1

js实现简单交互

js的外联引入

实现点击交互 样例1

实现点击交互 样例2

一些问题

点击事件的语法

js实现轮播效果

html 部分

css部分

js部分

AI分析js

项目实践

相关文章

赞助商

阅读排行

实现点击交互样例1

实现点击交互样例2