一、知识点
1.四大事件
//鼠标事件
//鼠标点击
div.addEventListener('click',function(){})
//鼠标经过
div.addEventListener('mouseenter',function(){})
//鼠标离开
div.addEventListener('mouseleave',function(){})
//焦点事件
//焦点触发
input.addEventListener('focus',function(){})
//失去焦点
input.addEventListener('blur',function(){})
//内容发生了变化
input.addEventListener('change',function(){})
//键盘事件
//键盘按下
input.addEventListener('keydown',function(){})
//键盘弹起
input.addEventListener('keyup',function(){})
//文本事件
//输入内容触发
input.addEventListener('input',function(){
//得到输入的内容
console.log(input.value);
})
2.事件对象
//事件对象
const btn=document.querySelector('button')
btn.addEventListener('click',function(e){
//获取当前事件类型
console.log(e.type);
//获取光标距离浏览器窗口左上角的位置的值
console.log(e.clientX);
console.log(e.clientY);
//获取光标距离当前DOM元素左上角的位置的值
console.log(e.offsetX);
console.log(e.offsetY);
})
const input=document.querySelector('input')
input.addEventListener('keyup',function(e){
//按下键盘的值或按哪个键
console.log(e.key);
})
3.trim()方法
//trim()方法:去除字符串左右两边的空格,中间的空格会保留
const str=' axuangogo '
console.log(str.trim());
4.环境对象
// 环境对象:this(谁调用,this就指向谁)
//普通函数里,this 指向 window
function fn(){}
fn()//window.fn()
//this 指向调用者 btn
const btn=document.querySelector('button')
btn.addEventListener('click',function(){
// btn.style.color='red'
this.style.color='red'
})
二、综合案例
1.随机点名
<script>
// 数据数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
//全局变量
let random=0
let timeId=0
//获取元素
const start=document.querySelector('.start')
const qs=document.querySelector('.qs')
const end=document.querySelector('.end')
qs.innerHTML=arr[0]
//点击开始
start.addEventListener('click',function(){
//开启定时器
timeId=setInterval(function(){
random=parseInt(Math.random()*arr.length)
qs.innerHTML=arr[random]
},35)
})
//点击结束
end.addEventListener('click',function(){
clearInterval(timeId)
//结束时删除当前抽取的元素,后续不再出现
arr.splice(random,1)
})
//当数组剩最后一个值时禁用按钮
if (arr.length === 1){
end.disabled=start.disabled=true
}
</script>
2.轮播图(完整版)
<script>
// 初始数据
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)' },
]
//获取
const next=document.querySelector('.next')
const prev=document.querySelector('.prev')
const img=document.querySelector('.slider-wrapper img')
const p=document.querySelector('.slider-footer p')
const footer=document.querySelector('.slider-footer')
const slider=document.querySelector('.slider')
let i=0 //信号量,控制播放第几张
// 右按钮
//点击事件
next.addEventListener('click',function(){
i++
if(i >= data.length){
i = 0
}
//调用函数
toggle()
})
// 左按钮
//点击事件
prev.addEventListener('click',function(){
i--
if(i < 0){
i = data.length - 1
}
//调用函数
toggle()
})
//声明一个渲染函数作为复用
function toggle(){
img.src=data[i].url
p.innerHTML=data[i].title
footer.style.backgroundColor=data[i].color
//更换小圆点
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
// 自动播放
let timerId = setInterval(function() {
//利用js自动调用点击事件
next.click()
}, 1000);
// 鼠标经过大盒子 停止定时器
slider.addEventListener('mouseenter',function(){
clearInterval(timerId)
})
// 鼠标离开大盒子 开启定时器
slider.addEventListener('mouseleave',function(){
clearInterval(timerId)
timerId = setInterval(function() {
next.click()
}, 1000);
})
</script>
3.小米搜索框
<script>
//获取元素
const input=document.querySelector('[type=search]')//属性选择器
const ul=document.querySelector('.result-list')
//焦点触发
input.addEventListener('focus',function(){
ul.style.display='block'
input.classList.add('search')
})
//失去焦点
input.addEventListener('blur',function(){
ul.style.display='none'
input.classList.remove('search')
})
</script>
4.评论回车发布
<script>
const tx=document.querySelector('#tx')
const total=document.querySelector('.total')
const item=document.querySelector('.item')
const p=document.querySelector('.text')
//获得焦点时,total显示
tx.addEventListener('focus',function(){
total.style.opacity=1
})
//失去焦点时,total隐藏
tx.addEventListener('blur',function(){
total.style.opacity=0
})
//修改评论字数
tx.addEventListener('input',function(){
total.innerHTML=`${tx.value.length}/200字`
})
//按下回车发布评论
tx.addEventListener('keyup',function(e){
if (e.key === 'Enter'){
//判断输入不等于空,可以写成 if(''),其中''为假
if(tx.value.trim() !== ''){
item.style.display='block'
p.innerHTML=tx.value
}
//按下回车清空文本域
tx.value=''
//按下回车评论字数复原
total.innerHTML=`${tx.value.length}/200字`
}
})
</script>
5.tab栏切换
<script>
//获取元素
const as=document.querySelectorAll('.tab-nav a')
//依次绑定鼠标经过事件
for(let i=0;i<as.length;i++){
as[i].addEventListener('mouseenter',function(){
//排他思想
document.querySelector('.tab-nav .active').classList.remove('active')//移除类
document.querySelector('.tab-content .active').classList.remove('active')
this.classList.add('active')//当前的as[i] 添加类
document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
})
}
</script>