定时器
setInterval
- 语法: setInterval(函数, 数字)
- 函数: 每次定时器重新执行的时候执行的代码
- 数字: 当前定时器多长时间重新执行一次单位是毫秒
setTimeout
- 语法: setTimeout(函数, 数字)
- 函数:倒计时器执行的时候, 要做的事情(要执行的代码)
注意
- 当不传递第二个参数的时候, 或者传递的是0的时候(就是定时器的时间)
- 执行速度会以最快的速度执行
- 最快的速度一般为 4~20 毫秒，最快速度与电脑性能有关
- 所以我们在书写定时器的时候一般都要指定一个时间一般不会直接给0或者不写
1. 定时器
setInterval(function () {
console.log('定时器每次执行的时候, 我就会被打印一次')
}, 1000)
setInterval(function () {
console.log('定时器每次执行的时候, 我就会被打印一次')
}, 0)
setInterval(function () {
console.log('定时器每次执行的时候, 我就会被打印一次')
})
2. 倒计时器
setTimeout(function () {
console.log('倒计时器时间到的时候, 我会执行一次')
}, 1000)
setTimeout(function () {
console.log('倒计时器时间到的时候, 我会执行一次')
}, 0)
setTimeout(function () {
console.log('倒计时器时间到的时候, 我会执行一次')
})
定时器的返回值
- 意义:表明这是这个页面的第几个定时器
- 如果页面的打开方式是利用 liveserver 启动, 那么定时器的ID, 会不太一样
- 作用:利用这个返回值可以关闭定时器
- 关闭语法1: clearInterval(要关闭的定时器的返回值)
- 关闭语法2: clearTimeout(要关闭的定时器的返回值)
- 注意: 关闭语法可以混用, 所以只要关闭定时器, 随便写上边那个都可以
- 但是推荐对应的书写, 目的是为了让别人一眼看出关闭的是定时器还是倒计时器
利用返回值 停止定时器
var timerID = setInterval(function () {
console.log('定时器执行的时候~~~~~~~~~')
}, 1000)
setTimeout(function () {
console.log('倒计时器执行, 停止了上边的定时器')
clearInterval(timerID)
}, 5000)
JS 的异步任务
- JS是单线程的，同一时间只能做一件事那就会出现一些问题
- 如果按照顺序去从上到下去执行一行代码那么遇到定时器的那些问题就很消耗时间用户会觉得界面很卡
- 为了解决这个问题我们吧JS分为两个任务==同步任务和异步任务==
- 目前为止同步任务就是除了定时器之外都是同步任务
- 异步任务就是那两个定时器
JS的执行顺序
- JS代码中都是先执行同步任务
- 把所有的同步任务都执行完毕之后在执行异步任务，
- 如果遇到了异步任务那么先把他暂时存到一个任务队列中
- 等待所有的同步任务执行完毕
注意
BOM 对浏览器对象模型
- 获取浏览器的宽高
- 获取浏览器卷去的高度
- 通过JS控制页面的跳转
- 获取浏览器地址栏的信息
- 操作浏览器页面的滚动条
- 获取浏览器的版本
- 打开浏览器的弹窗
核心
- 页面中有一个对象叫做window
- window是JS内置的一个对象，上边所有的方法都可以用window内部提供一些东西解决
- 书写的时候window.xxx
扩展:
- 我们所有的全局变量（函数意外的地方声明的变量）和全局函数（函数以外的地方声明的函数全都存放在window对象中
- window对象中有个属性叫做name在开发的时候我们尽量避免使用name来命名
获取浏览器的窗口尺寸 (宽高)
- 注意当前的方法是包含浏览器的滚动条
- console.log(window.innerHeight)
- consoel.log(window.innerWidth)
prompt用户输入框
- 会有一个返回值就是用户输入的内容，永远是字符串格式
prompt('弹出框1: prompt')
window.prompt('弹出框2: window.prompt')
alert 弹出框
confrim 用户询问框
- 会有一个返回值是如果你点击确定是true，取消是false
- alert弹出框会中断（暂停）程序的运行，直到你关闭弹出框
console.log('JS 开始')
alert("提示信息1: alert")
console.log('JS 运行到一半')
window.alert('提示信息2: window.alert')
console.log('JS运行完毕')
var res = window.confirm('您确定删除吗?')
console.log('用户确定与否: ', res)
浏览器的地址信息
- 在window中对象中有一个对象叫做location，他的内部存储的就是浏览器地址的信息
location.href
- location.href专门存储浏览器地址栏内的url地址信息
- var url = window.location.href
- 我们也可以给这个属性赋值，这样就直接跳转到我们更改的地址了
location.reload
- location.reload会重新加载页面，相当于刷新
- 注意不要写在全局内，否则浏览器会一直刷新
- window.location.reload()
浏览器的历史信息
- window内有个对象叫做histroy他专门用来存储历史记录信息
history.back
- 用来回退历史记录的，就是回到前一个页面，相当于浏览器的左上角的<-按钮
- 注意我么需要有上一条记录，不然就一直在这个页面不会回退
- window.history.back()
history.forward
- 用来去到下一个历史记录里面相当于浏览器的->
- 注意我们之前有过回退操作，不然我们现在就是最后一个界面没有下一个
- window.history.forward()
浏览器的版本信息（了解）
浏览器的延迟加载事件
- 在以前开发的时候, 我们会将 所有的 JS 代码, 全都放在这个函数中运行
- 因为在这个函数中运行的时候, 可以保证页面所有的资源已经加载完毕了, 比如 标签, 图片
- console.log('当前函数不需要调用,会在当前页面的所有资源加载完毕的时候执行')
浏览器的滚动事件
window.onscroll = function (){
console.log('当前函数不需要调用，会在浏览器发生滚动事件的时候执行')
}
- 浏览器滚动的距离
- 滚动时间发生的时候浏览器的位置一直没变二十浏览器内的页面发生了改变
window.onscroll = function () {
console.log('滚动事件')
console.log('body: ', document.body.scrollLeft)
console.log('documentElement: ', document.documentElement.scrollLeft)
}
如何区分
- 谷歌 火狐
- 如果 页面 声明 那么需要使用 documentElement
- 否则使用 body
- IE (了解)
- 如果没有 声明 那么使用两个都没问题
- 如果 声明了 那么只能使用 documentElement
- Safari(苹果)
- 两个都不用, 使用一个单独的方法
window.pageYOffset
本地存储 localStorage
- 把一些常用的信息春存在用户的电脑本地（存储在浏览器中）
- 浏览器的本地存储持久化存储，存储之后不手动删除那么将永远存在浏览器中
- 存储的时候只能存储基本数据类型中的字符串
- 如果需要其他数据类型，需要借助JSON提供的方法
- 可以实现款页面通讯
增 --- 实现一个本地存储 (localStorage)
- window.localStorage.setItem('存储的标识是什么', '要存储起来的内容')
window.localStorage.setItem('box', '20230824')
window.localStorage.setItem('qq', '88888888')
window.localStorage.setItem('arr1', [1, 2, 3, 4, 5])
window.localStorage.setItem('obj1', { id: 'QF001', name: '张三' })
注意本地存储只能存储一些简单的字符串复杂的会不识别我们需要将他的类型进行转换成JSON类型在输出的时候在用转换回来
window.localStorage.setItem('arr2', JSON.stringify([1, 2, 3, 4, 5]))
window.localStorage.setItem('obj2', JSON.stringify({ id: 'QF001', name: '张三' }))
查 --- 获取之前存储到本地的一些数据
console.log('box: ', window.localStorage.getItem('box'))
var qq = window.localStorage.getItem('qq')
console.log('qq: ', qq)
console.log('arr2: ', window.localStorage.getItem('arr2'))
console.log('obj2: ', window.localStorage.getItem('obj2'))
console.log('arr2: ', JSON.parse(window.localStorage.getItem('arr2')))
console.log('obj2: ', JSON.parse(window.localStorage.getItem('obj2')))
window.localStorage.clear()
