js学习1-编程知识

js学习1

news/2025/2/7 1:59:17/文章来源:https://www.cnblogs.com/GJ504b/p/18446160

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";

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/807690.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

js学习1

js实现简单交互

js的外联引入

实现点击交互样例1

实现点击交互样例2

一些问题

点击事件的语法

js实现轮播效果

html 部分

css部分

js部分

AI分析js

项目实践

相关文章

动态规划Leetcode96.不同的二叉搜索树

“！提醒：续购防毒”钓鱼网站套路

在VS2022上安装pygame模块

SQLSTATE[42S22]: Column not found: 1054 Unknown column Color in field list

P9752 [CSP-S 2023] 密码锁P8814 [CSP-J 2022] 解密

解决wsl 安装出现Installing, this may take a few minutes… 时间长。且重新打开进入root用户问题

【STC15】实现printf()重定向的相关问题

数据库——DQL单表查询

数据库——DDL数据库和数据表的基本操作

安卓Android虚拟机分享及使用

PotPlayer(免费媒体播放器) v1.7.22233.0 多语便携版

25赛季算法组第一阶段第二次培训（ubuntu安装与基本使用）

js学习1

js实现简单交互

js的外联引入

实现点击交互 样例1

实现点击交互 样例2

一些问题

点击事件的语法

js实现轮播效果

html 部分

css部分

js部分

AI分析js

项目实践

相关文章

实现点击交互样例1

实现点击交互样例2