定时器
//定时器 // 函数： 定时器重新执行的时候， 要做的事情（要执行的代码） // 数字： 单位毫秒 当前定时器每个多少时间重新执行一次 // 语法：setInterval() var i = setInterval(function(){ console.log('定时器打印，我就是朱连超他奶') document.write(i) document.write('
') }, ) // 倒计时 // 函数： 延长多长时间执行（只会执行一次） // 数字： 单位毫秒 当前倒计时器延长多长时间重新执行一次 var i = setTimeout(function () { console.log('倒计时打印') }, 2000) document.write(i) document.write('
') //关闭语法： 意义: 表明当前定时器是这个页面的第几个定时器 注意: 如果页面的打开方式是利用 liveserver 启动, 那么定时器的ID, 会不太一样 作用: 能够利用返回值关闭这个定时器 clearInterval() 要关闭的定时器的返回值 clearTimeout () 要关闭的定时器的返回值 // 注意: 关闭语法可以混用, 所以只要关闭定时器, 随便写上边那个都可以 // 但是推荐对应的书写, 目的是为了让别人一眼看出关闭的是定时器还是倒计时器 // 返回值h // 查看定时器的返回值 这里返回的是 页面一共有多少个定时器 var timerId = setInterval(function () { }, 1000) console.log(timerId) var timerId = setTimeout(function () {}, 1000) console.log(timerId)
JS 的异步任务
JS 的异步任务 * * JS 是单线程的, 同一时间只能做一件事 * 如果 只有单线程那么可能会遇到一些问题 * * 上述的方案 如果遇到一个中间的代码 耗时很久, 那么后续的所有代码, 都需要等待上边的代码执行完毕后在执行 * 这种情况给用户的感觉就是非常卡顿 * * * 所以为了结局上述的问题, JS 将代码分为两个任务 * * 同步任务 * 目前所接触到的内容中, 除了两个定时器之外的都是同步任务 * * 异步任务 * 目前所接触到的内容中, 只有两个定时器算是异步任务, 将来还会有新的异步任务 * * * JS 中代码执行的顺序 * 代码从上往下执行 * 先将代码中所有的同步任务, 全都执行一遍 * 同步任务执行完毕后, 在执行异步任务 * 如果在代码的中间遇到了异步任务, 那么先将异步任务暂存到一个任务队列中 等 待所有的同步任务执行完毕后执行 */ console.log(1,'开始执行') console.log(2,'开始执行') setInterval(function(){ console.log('傻逼朱连超') },2000) 他是异步任务，最后执行 console.log(3,'开始执行') console.log(4,'开始执行')
BOM （ 浏览器对象的模型 , 由浏览器赋予的能力）
核心：（ window）
扩展: * 我们所有的全局变量(函数以外的地方声明变量) 和 全局函数(函数以外的地方声明的函数) * * 全都存放在 window 对象中 * * window 对象中有一个属性叫做 name, * 所以我们在开发的时候, 尽量避免全局变量或者全局函数的名字叫做name */
BOM:其实就是 浏览器提供给我们操作浏览器的一个能力
1，获取浏览器的宽高
console.log( Window.inner.Width) 宽
console.log( Window.inner.Height) 高
2，获取浏览器页面卷去的高度
3，通过JS控制页面的跳转
4，获取浏览器地址栏的信息
location 内部储存浏览器地址的信息
语法: var url = window.location.href
window.location.href = 'www.baidu.com' 跳转
location.reload 会重新加载页面, 相当于刷新
注意: 不要写在全局内, 否则浏览器会一直刷新
window.location.reload()
5，操作浏览器页面的滚动条
浏览器的滚动距离
注意: 滚动事件发生的时候, 浏览器的位置一致没变, 而是 浏览器内的页 面发生了滚动
document.body.scrollTop 上下滚动
document.documentElement.scrollTop 上下滚动
window.onscroll = function () { console.log('滚动事件') console.log('body: ', document.body.scrollTop) console.log('documentElement: ', document.documentElement.scrollTop) }
document.body.scrollLeft 左右滚动
document.documentElement.scrollLeft 左右滚动
window.onscroll = function () { console.log('滚动事件') console.log('body: ', document.body.scrollLeft) console.log('documentElement: ', document.documentElement.scrollLeft) }
6，获取浏览器的版本
浏览器的版本信息(了解) * window 中的 navigator 可以获取到浏览器的信息
7，打开浏览器的弹窗
window.prompt( 弹出框)
window.alert( 提示框 可以中断)
window.confirm(询问框)
7--1 浏览器的事件
浏览器延迟加载事件
window.onload = function(){
/** // * 在以前开发的时候, 我们会将 所有的 JS 代码, 全都放在这个函数中运行 // * // * 因为在这个函数中运行的时候, 可以保证页面所有的资源已经加载完毕了, 比如 标签, 图片 // */ // console.log('当前函数不需要调用, 会在当前页面的所有资源加载完毕的时候执行')
}
8， 浏览器的历史记录
浏览器的历史记录 * window 中有一个对象叫做 history 他专门用来存储历史记录信息 history.back history.back 用来回退历史纪录的, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮 * 注意: 我们需要有上一条记录, 不然就一直在这个页面 不会回退 window.history.back() history.forward * history.forward 是去到下一个历史记录里面, 也就是去到下一个页面, 就相当于 浏览器左上角的 → 按钮 * 注意: 前提是我们之前有过回退操作, 不然的话我们现在就是在最后一个页面, 没有下一个 window.history.forward()
9， 如何区分
谷歌，火狐
如何 页 面 声明《！DOCTYPE html 》 那么需要使用documentElement 否则使用body
10，本地储存
* 本地存储
* 把一些常用的信息存储在 用户的电脑本地(存储在浏览器中)
*
* 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.stringify([1, 2, 3, 4, 5]) 会将传入的数组 转换成 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('arr1: ', window.localStorage.getItem('arr1')) console.log('obj1: ', window.localStorage.getItem('obj1')) // 此时获取到的 JSON 格式的 字符串, 想要使用 ,需要借助 JSON 提供的方法, 还原格式 console.log('arr2: ', window.localStorage.getItem('arr2')) console.log('obj2: ', window.localStorage.getItem('obj2')) // JSON.parse() 能够将传入的 JSON 格式的字符串还原成原本的数据类型, 原本是数组就还原为数组, 原本是对象就还原为对象 console.log('arr2: ', JSON.parse(window.localStorage.getItem('arr2'))) console.log('obj2: ', JSON.parse(window.localStorage.getItem('obj2')))
/** * localStorage * * 增: window.localStorage.setItem('key', 'value') * * 查: window.localStorage.getItem('key') * 返回值: 查询到返回对应的数据, 否则返回 null * * 删: window.localStorage.removeItem('key') * * 清空: window.localStorage.clear() * * * 以后在公司开发的时候, 建议只用删除, 目的是为了自己的操作不会影响同事的代码 */ // 删除某一条 // window.localStorage.removeItem('msg') // 清空 window.localStorage.clear()
