webapi（四）- 时间对象

时间对象

可以让网页显示时间

作用：

得到当前系统时间或者指定时间

语法：

1. 获取当前时间

let data = new Date()

代码语言：javascript复制

// 得到当前时间
        let date = new Date()
        console.log(date)

2. 获取指定时间

let date = new Date(‘指定的时间’)

代码语言：javascript复制

// 得到指定时间
        let date = new Date('1949-10-01')
        console.log(date)

时间对象方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期几	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

代码语言：javascript复制

// 步骤：
        // 1. 先创建时间对象
        // 2. 时间对象 去调用方法得到年月日
        let date = new Date()
        // 年
        console.log(date.getFullYear())
        // 月
        console.log(date.getMonth()   1)
        // 星期
        console.log(date.getDate())
        // 日
        console.log(date.getDay())
        // 时
        console.log(date.getHours())
        // 分
        console.log(date.getMinutes())
        // 秒
        console.log(date.getSeconds())

拓展方法：toLocaleString()

时间对象的 toLocaleString 方法 可以得到本地化时间格式

代码语言：javascript复制

console.log(new Date().toLocaleString())

时间戳

时间戳定义：

指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

使用场景： 倒计时效果

时间戳获取

1. getTime()

代码语言：javascript复制

// 返回当前时间
// let date = new Date()
// console.log(date.getTime())
// 返回指定时间
 let date = new Date('1999-12-27')
console.log(date.getTime())

2. new Date()

代码语言：javascript复制

// 返回当前时间
// console.log( new Date())
// 返回指定时间
console.log( new Date('1999-12-27'))

3. Date.now()

只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

代码语言：javascript复制

console.log(Date.now())

重绘和回流（重排）

浏览器进行界面渲染的过程

1. 解析（Parser）HTML，生成DOM树(DOM Tree)
2. 同时解析（Parser） CSS，生成样式规则 (Style Rules)
3. 根据DOM树和样式规则，生成渲染树(Render Tree)
4. 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
5. 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
6. Display: 展示在页面上

回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档 的过程称为 回流。

会导致重排的工作

• 页面的首次刷新
• 浏览器的窗口大小发生改变
• 元素的大小或位置发生改变
• 改变字体的大小
• 内容的变化（如：input框的输入，图片的大小）
• 激活css伪类 （如：:hover）
• 脚本操作DOM（添加或者删除可见的DOM元素）