网页特效(尺寸、定时器)及 JSON
1 . 定时器
什么是定时器 : 一段代码 ,间隔时间 ,自动执行
定时器语法 :
- 永久定时器: 一旦开启,永久重复执行,只能手动清除
- 开启定时器:
setInterval(一段代码,间隔时间)
- 清除定时器:
clearInterval(定时器ID)
- 开启定时器:
- 一次定时器: 开启之后间隔时间只会执行一次, 执行完成后自动清除
- 开启定时器:
setTimeout(一段代码,间隔时间)
- 清除定时器:
clearTimeout(定时器ID)
- 开启定时器:
<button class="btn">移除定时器</button>
<p id="pp">0</p>
// 开启定时器
let timeID = setInterval( function(){
document.querySelector('p').innerText++
}, 2000 )
document.querySelector('.btn').onclick = function()
//清除定时器
clearInterval(timeID)
}
注意点 :
- 开启定时器(两个参数)
- 第一个参数类型是函数(
Function
): 函数体内执行定时器时间结束后的代码(回调函数) - 第二个参数类型是数字 (
Number
) : 间隔时间 , 单位:ms 毫秒(省略单位)
- 第一个参数类型是函数(
- 清除定时器 (一个参数) : 参数为定时器编号
timeID
- 一个页面可以开启很多个定时器 , 浏览器为了便于管理。会给每一个定时器添加编号,称之为定时器id
定时器常用功能 : 性能优化
-
函数防抖 : 间隔时间内 多次触发事件,以最后一次为准
- 函数防抖的使用 :
- 声明一个变量存储定时器id
- 每一次触发事件的时候,先清除上一次的定时器,以本次为准
- 开启定时器,间隔时间之后再触发事件处理函数
-
函数节流 : 间隔时间内函数只被触发一次
- 函数节流的使用 :
- 声明变量存储本次触发的时间time
- 每一次触发的时候, 使用当前时间
time
,判断两次间隔是否超过节流时间- 超过: 触发,并且存储本次触发时间。
- 不超过:不触发
函数的防抖与节流详见 : 【性能优化】函数的防抖与节流
定时器场景 :
- (1) 电商秒杀
- (2) 自业务动轮播
2 . 三大家族
offset家族
作用 : 获取元素 ‘自身’ 真实宽高与位置
offsetWidth
: 获取元素真实宽度 (真实宽度 = width + padding*2 + border*2
)offsetHeight
: 获取元素真实高度 (真实高度 = height + padding*2 + border*2
)offsetLeft
: 自身左外边框 到 定位父元素 左内边框距离offsetTop
: 自身上外边框 到 定位父元素 上内边框距离
注意: 如果父级有定位,就是父级元素,没有的话就是body
scroll家族
作用 : 获取元素 ‘内容’ 真实宽高与位置
scrollWidth
: 内容真实宽度scrollHeight
: 内容真实高度scrollLeft
: 滚动条滚动左边的距离scrollTop
: 滚动条滚动上边的距离
场景 : 固定导航 、 电梯导航
获取网页滚动距离
业务流程 :
- 网页注册滚动条事件 : window.onscroll
- 获取网页滚动条距离 : 获取html标签scrollLeft / scrollTop
//1. 网页注册滚动条事件 : window.onscroll
window.onscroll = function () {
console.log('滚动条滚动了')
//2.获取网页滚动条距离
console.log(
document.documentElement.scrollLeft,
document.documentElement.scrollTop
)
}
client家族
作用 : 获取元素 ‘可视区域’ 真实宽高与位置
扫描二维码关注公众号,回复:
14584707 查看本文章
- clientWidth : 获取可视区域宽度
- clientHeight : 获取可视区域高度
- cilentLeft : 获取可视区域位置 (其实就是左边框宽度)
- clientTop : 上边框宽度
场景 : 响应式、横竖屏适配
响应式、横竖屏适配
- 什么是响应式布局 : 一个页面适配多个不同的设备
- 响应式布局原理 : 根据设备尺寸的不同,加载不同的样式
- 大PC >1200px 红色
- 小PC 992-1200 橙色
- 平板 768-992 黄色
- 手机 <768 绿色
- 响应式布局业务流程 :
- (1) 给页面注册一个尺寸变化事件(视口变化) : window.onresize
- (2) 获取页面可视区域大小(视口大小) : document.documentElement.clientWidth
- 业务代码如下 :
// (1) 给页面注册一个尺寸变化事件(视口变化) : window.onresize
window.onresize = function () {
// (2)获取可视区域大小: 视口大小
let cw = document.documentElement.clientWidth
let ch = document.documentElement.clientHeight
/* 响应式布局原理:根据设备不同加载不同的样式 */
if( cw > 1200 ){
document.body.style.backgroundColor = 'red'
}else if( cw > 992 ){//隐藏条件 cw<=1200
document.body.style.backgroundColor = 'orange'
}else if( cw > 768 ){//隐藏条件 cw<=992
document.body.style.backgroundColor = 'yellow'
}else{//隐藏条件 cw<=768
document.body.style.backgroundColor = 'green'
}
/* 横竖屏适配 竖屏: 宽度<高度 横屏: 宽度>高度 */
if( cw < ch ){
alert('竖屏')
}else{
alert('横屏')
}
}
3 . JSON
什么是 JSON : JSON 是一种数据格式,本质是字符串
JSON 作用 : 解决数据跨平台传输
- 实际业务中,前端网页的数据都是从服务器(后台)获取,而服务器编程语言不一定是 js,也可以是其他语言。 例如
java、python、go、c++、c#、.net
…等等。 不同的编程语言数据类型不一样的。所以后台无法直接传递 js 对象的。 数据涉及到跨平台传输。 - 后来人们发明了一种通用的数据交换格式,这种数据格式几乎所有的编程语言都支持。这就是json 对象,本质是一种字符串格式
JSON 和 js 互转 :
- JSON -> JS : 获取后台数据之后,必须要把 json 转成 js 才可以正常使用
- 语法 :
JSON.parse(json)
- 语法 :
- JS -> JSON : 我们前端发给后台的数据不能直接发js,需要转成json
- 语法 :
JSON.stringify(js)
- 语法 :
let js = { name: '张三', age: 18, eat: [1, 2, 3] }
let json = ' {"name":"张三","age":"18","hobby":["吃饭","睡觉"]} '
//(1)JSON->JS : 把json字符串转成js对象
let jsObj = JSON.parse(json)
console.log(jsObj)
//(2)JS->JSON : 把js对象转成json格式字符串
let jsonStr = JSON.stringify(js)
console.log(jsonStr)