const 声明一个常量变量
常量声明：const
- const 属于常量的一种声明方式：
意味着不能再次修改
const arr = []
arr.push("皮皮")
//这不算是修改，只改变了堆中的值，
栈中的地址并没有改变
const arr = []
arr = “你好”
//报错，是开辟了新的栈空间
栈中的地址改变了
对于引用类对象数据：
obj.name = "xx"
不算修改对象
const 定义后不能修改，
let 定义后可重新赋值
判断const是否被改变
判断是不是修改 看 它有没有重新写 = 号 或者自增或者自减
const 声明的变量不能被修改
1 普通类型的数据 直接写 = ，表示修改数 报错
2 复杂类型的数据 直接写 = ，表示修改 报错
3 复杂类型的数据 写 = 相当与重新开辟新空间
能使用const 就不用 let
你不知道 什么时候用const
学习老师的代码
直接使用let
事件对象
定义：什么是事件对象：
事件发生时，就包含的信息
怎么样获取事件对象：
一般在事件处理函数的第一个形参（通常用，e,event,ev）
等表示。
鼠标的坐标的信息的获取 ：
方式一：clientX clientY
获取鼠标到浏览器的左上角的位置
document.body.addEventListener('click',function(e){
console.log(e.clientX,e.clientY)}) // 距离屏幕x轴值 距离屏幕Y轴值
注意：都是不带单位 如： 500 500
方式二：offsetX offsetY
获取鼠标到绑定事件的盒子的左上角的距离
div.addEventListener('click',function(e){
console.log(e.clientX,e.clientY)}) // 距离div元素x轴值 距离div元素Y轴值
注意：都是不带单位 如： 500 500
键盘按键事件：
keydown 鼠标按下时触发
window.addEventListener("keydown",funtion(e){
console.log(e.key)}) //可以打印 出按下的 哪个键
keyup 鼠标抬起来触发
document.body.addEventListener("keyup",funtion(e){
console.log(e.key)}) //可以打印 出按下的 哪个键 如：按Enter 打印 “”Enter“”
点击发布按键事件案例
用到了 keydown 或者 keyup 事件 利用 e.key判断出Enter按键 trim（）去除空格 来判断
点击发布按键事件：
index.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>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.bigBox{
left: 50%;
width: 250px;
position: relative;
}
button{
position: absolute;
left: 200px;
bottom: -20px;
}
ul{
width: 100%;
/* background-color: pink; */
top: 200px;
position: absolute;
padding-bottom:100px ;
}
li{
padding: 5px;
color: aqua;
list-style: none;
border-bottom: 1px solid pink;
}
</style>
</head>
<body>
<div class="bigBox">
<textarea name="" id="" cols="30" rows="10" class="text"></textarea>
<button>发布</button>
<ul class="father">
<!-- <li>1</li> -->
</ul>
</div>
<script src="./index.js"></script>
</body>
</html>
index.js页面：
/*
1，点击发布按钮
2，把文本域中的文本 显示在下列列表中
3，用户在文本域中按下回车键 也能实现 发布按钮 功能
分析：
用到可 文本域的 keydown 获取 keyup 事件
获取具体按键 e.keyCode 等于具体某个按键
*/
const father = document.querySelector('.bigBox .father');
const btn = document.querySelector('.bigBox button');
const text = document.querySelector('.bigBox .text');
function createLi() {
if (!text.value.trim()) {
//去除空格
return;
}
const li = document.createElement('li');
li.innerHTML = text.value.trim(); //去除空格
father.appendChild(li);
text.value = ''; //清空
}
document.body.addEventListener('click', function () {
createLi();
});
text.addEventListener('keyup', function (e) {
// console.log('e -----> ', e);
// if(e.keyCode === 13){
// let li = document.createElement('li')
// li.innerHTML = text.value
// createLi()
// }
console.log('e.key -----> ', e.key); //输出按下的键
if (text.value === '') {
console.log('"不能输出空格" -----> ', '不能输出空格');
return;
}
if (e.key === 'Enter') {
console.log('e.key -----> ', e.key); //输出按下的键
const li = document.createElement('li');
li.innerHTML = text.value;
createLi();
// e.preventDefault() //阻止默认换行效果
// 解决按下回车键 文本换行的效果
// 文本域的默认行为
// 处理 标签的默认行为
// return false
// 阻止文本域默认换行的效果 -----e.preventDefaulte() 阻止默认行为
}
});
自动调用按键事件
let btn = document.Element('button')
btn.addEventListener('click',function(){
console.log('123')
})
setInteval(function(){
btn.click() //1秒钟调用一次点击事件，打印一次
},1000)
去除左右两次的空格
元素.value.trim() 去除两侧空格
轮播图案例
主要用到 索引下标保存 来在定时器里循环
index.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>Document</title>
<style>
.box {
width: 810px;
}
.box img{
width: 100%;
}
</style>
</head>
<body>
<h1>美女画廊</h1>
<div class="smallPic">
<!-- <img src="./3.3/1-small.jpg" alt="">
<img src="./3.3/2-small.jpg" alt="">
<img src="./3.3/3-small.jpg" alt="">
<img src="./3.3/4-small.jpg" alt=""> -->
</div>
<div class="box">
<!-- <img src="./3.3/1.jpg" alt=""> -->
<img src="./3.3/placeholder.png" alt="">
</div>
<h3>选中美女</h3>
<script src="./index.js"></script>
</body>
</html>
index.js
let list = [
{small:"./3.3/1-small.jpg",big:"./3.3/1.jpg",title:"第一个美女"},
{small:"./3.3/2-small.jpg",big:"./3.3/2.jpg",title:"第二个美女"},
{small:"./3.3/3-small.jpg",big:"./3.3/3.jpg",title:"第三个美女"},
{small:"./3.3/4-small.jpg",big:"./3.3/4.jpg",title:"第四个美女"}
]
let smallPic = document.querySelector('.smallPic')
let big = document.querySelector('.box img')
let h3 = document.querySelector('h3')
function product(){
let html = ""
for(let i =0;i<list.length;i++){
html += `<img src="${list[i].small}" alt="">`
}
smallPic.innerHTML = html
big.src = list[0].small
clickSmall()
}
product()
function clickSmall(){
let smalls = document.querySelectorAll('.smallPic img')
for(let i =0;i<smalls.length;i++){
smalls[i].addEventListener('click',function(){
big.src = list[i].small
h3.innerHTML = list[i].title
index = i
})
}
}
let index = 0
setInterval(() => {
index++
if(index===list.length){
index=0
}
big.src = list[index].small
h3.innerHTML = list[index].title
}, 1000);
