webapi（四）- 时间对象

且陶陶

发布于 2023-04-12 15:28:56

8980

文章被收录于专栏：Triciaの小世界Triciaの小世界

时间对象

可以让网页显示时间

作用：

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

语法：

1. 获取当前时间

let data = new Date()

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

2. 获取指定时间

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

// 得到指定时间
        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

// 步骤：
        // 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 方法可以得到本地化时间格式

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

时间戳

时间戳定义：

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

使用场景： 倒计时效果

时间戳获取

1. getTime()

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

2. +new Date()

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

3. Date.now()

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

console.log(Date.now())

重绘和回流（重排）

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

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

回流(重排)

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

会导致重排的工作

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

💡 简单理解影响到布局了，就会有回流

重绘

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。

💡 重绘不一定引起回流，而回流一定会引起重绘。

例如

// 重绘和重排
    let s = document.body.style
    s.padding = '2px' // 重排+重绘
    s.border = '1px solid black'  // 重排+重绘
    s.fontSize = '20px'   // 重排+重绘
    s.backgroundColor = 'red'   // 重绘

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-15，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染