定时器-间歇函数
作用：可以根据时间自动重复执行某些代码
开启定时器
setInterval(函数,间隔时间)//间隔时间是毫秒
注意：
- 函数名字不需要加括号
- 定时器返回的是一个id数字
关闭定时器：
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
案例：按钮60秒之后才可以使用
<button></button>
<script>
//获取btn元素
let btn = document.querySelector('button')
//声明计数器
let i = 60
//声明操作函数
function btnOnclik() {
btn.disabled = true
btn.innerText = `已阅读协议${i}`
if (i === 0) {
btn.disabled = false
btn.innerText = `同意`
clearInterval(set)//关闭定时器
return
}
i--
}
//开启定时器
let set = setInterval(btnOnclik, 1000);
</script>
案例：随机点名
//名字数据
let names = ['曹节', '曹操', '曹嵩', '曹仁', '曹洪', '曹豹', '曹性', '曹昂', '曹丕', '曹植', '曹纯', '曹休', '曹永', '曹彰', '曹熊', '曹睿', '曹真', '曹遵', '曹宇', '曹芳', '曹爽', '曹羲', '曹训', '曹彦', '曹据', '曹髦', '曹德', '曹奂', '曹霖', '曹安民']
let lick = document.querySelector('p')//装抽中的名字容器
let btn1 = document.querySelector('button')//querySelector默认获取第一个button元素
let timer
function Ran() { //随机抽取名字
let ran = parseInt(Math.random() * names.length)
lick.innerText = `${names[ran]}`
}
function start() {//开启定时器，调用Ran（）开始点名
btn1.disabled = true
timer = setInterval(Ran, 100)
}
function end() {//关闭定时器
clearInterval(timer)
btn1.disabled = false
}
事件
事件监听
给某元素添加监听事件，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
语法：
元素.addEventListener('事件',要执行的函数)
事件监听的三要素
- 事件源：获取某个dom元素添加事件
- 事件：用什么方式触发，如click点击、鼠标经过mouseover
- 事件调用的函数
例：
// 获取元素
let btn = document.querySelector('button')
//添加事件监听
btn.addEventListener('click',function(){
alert('被点击了')
})
注意：
- 事件类型加引号
- 函数只有触发才会执行，每触发一次都会执行一次
案例：点击关闭二维码
<div>
<!-- 关闭按钮（字体图标） -->
<i class="iconfont icon-guanbi1"></i>
<p>去领红包</p>
<img src="./img/code.png" alt="">
</div>
<script>
//获取父盒子
let box = document.querySelector('div')
//获取添加事件的元素
let btn = document.querySelector('i')
//添加事件监听
btn.addEventListener('click', function () {
box.style.display = 'none'
})
</script>
事件监听版本（拓展）
-
DOM L0
事件源.on事件 = function() { } -
DOM L0
事件源.addEventListener(‘事件’， 事件处理函数) -
发展史
- DOM L0 ：是 DOM 的发展的第一个版本
- DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
- DOM L2：使用addEventListener注册事件
- DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
事件类型
鼠标事件、焦点事件、键盘事件、文本事件
鼠标事件
| 事件 | 描述 |
|---|---|
| click | 单击事件 |
| mousedown | 按下鼠标键时触发 |
| mouseup | 释放按下的鼠标键时触发 |
| mousemove | 鼠标移动事件 |
| mouseover | 移入事件 |
| mouseout | 移出事件 |
| mouseenter | 移入事件 |
| mouseleave | 移出事件 |
注意：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动 ，mouseover事件会在子节点上触发多次。
案例：全选文本框案例
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
分析：
- 遍历下面的所有的checkbox,添加点击事件
- 在事件内部,遍历所有的checkbox状态,只要有一个为false 就将全选状态设置为false , 把文字改为全选，并且直接return (退出循环)
- 在循环结束将全选的状态直接设置为true
结构：
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
js：
<script>
// 1.获取全选复选框
let checkAll = document.querySelector("#checkAll")
let cks = document.querySelectorAll('.ck')
let all = document.querySelector('.all')
// 2.为全选复选框添加单击事件
checkAll.addEventListener('click', function () {
checkAll.checked ? all.innerHTML = '取消' : all.innerHTML = '全选'
// 为单选复选框添加全选复选框的checked状态
for (let i = 0; i < cks.length; i++) {
cks[i].checked = checkAll.checked
}
})
//3.为单选复选框添加事件
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
for (let j = 0; j < cks.length; j++) {
//遍历单选复选框checked 只要有FALSE则全选复选框为FALSE
if (!cks[j].checked) {
checkAll.checked = false
all.innerHTML = '全选'
return
}
}
//遍历完单选复选框的checked都为true设置全选复选框为true
checkAll.checked = true
all.innerHTML = '取消'
})
}
</script>
焦点事件
表单获得焦点
| focus | 获得焦点 |
|---|---|
| blur | 失去焦点 |
案例：小米搜索框案例
需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
分析：
- 开始下拉菜单要进行隐藏
- 表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）
- 表单失去焦点，反向操作
//样式
<style>
input {
outline: 1px solid #ff6700;
border: none;
}
ul {
display: none;
padding: 0;
margin: 0;
width: 172px;
border: 1px solid #ff6700;
}
li {
list-style: none;
}
</style>
<div>
<input type="text" placeholder="小米笔记本">
<ul>
<li>手机</li>
<li>黑鲨5s</li>
<li>空调</li>
<li>耳机</li>
</ul>
</div>
<script>
let int = document.querySelector('input')
let myul = document.querySelector('ul')
//给input添加监听焦点事件
int.addEventListener('focus', function () {
myul.style.display = 'block'
})
//给input添加监听失焦事件
int.addEventListener('blur', function () {
myul.style.display = 'none'
})
</script>
键盘事件
键盘触发
| Keydown | 键盘按下触发 |
|---|---|
| Keyup | 键盘抬起触发 |
例：
document.addEventListener('keydown', function () {
console.log('键盘按下去了');
})
document.addEventListener('keyup', function () {
console.log('键盘抬起来了');
})
案例：打印用户在键盘输入键
分析：
- 文档添加键盘监听事件
- 根据E对象获取用户输入的key
- 获取的key打印
你输入的是：<span></span>
<script>
let youKey = document.querySelector('span')
//页面添加键盘监听事件
document.addEventListener('keyup', function (e) {
youKey.innerHTML = `${e.key}`
})
</script>
文本事件
表单输入触发
| input | 用户输入事件 、内容变化立即触发 |
|---|---|
| focus | 聚焦事件 |
| blur | 失焦事件 |
| change | 失焦事件、 内容改变才能触发 |
案例：微博输入案例
需求：用户输入文字，可以计算用户输入的字数
分析：
- 判断用输入事件 input
- 不断取得文本框里面的字符长度
- 把获得数字给下面文本框
结构：
<div class="w">
<div class="controls">
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
</ul>
</div>
</div>
js：
<script>
//获取文本域
let text = document.querySelector('textarea')
//获取发布区域
let contentList = document.querySelector('.contentList')
//计数容器
let useCount = document.querySelector('.useCount')
//发布按钮
let send = document.querySelector('#send')
//为文本域添加input事件
text.addEventListener('input', function () {
let textnum = text.value.length
useCount.innerHTML = `${textnum}`
})
//为发布按钮添加点击事件
send.addEventListener('click', function () {
contentList.innerHTML = `${text.value}`
})
</script>
