07-JS时间对象

时间对象

一、数学方式

在js中有数学方法可以去处理常见的数学运算，这种是js中的内置对象叫做Math方法

1. PI / abs / max / min

圆周率 / 绝对值 / 最大值 / 最小值

console.log(Math.PI)//圆周率后面不可以加小括号
console.log(Math.abs(-1))
console.log(Math.max(1,2,3,4,5,6))
console.log(Math.min(1,2,3,4,5,6))
1
2
3
4

2. ceil / floor / round

向上取整 / 向下取整 / 四舍五入

console.log(Math.ceil(5.01))//6
console.log(Math.floor(4.9))//4
console.log(Math.round(1.999))
1
2
3

3. sqrt / pow

开根号 / 求幂

console.log(Math.sqrt(4))
console.log(Math.pow(5,2))
1
2

4. 随机数【重点】

// 生成一个0~1之间的随机数 [0,1)
console.log(Math.random())

// 随机数的封装：1.生成[a,b)随机数
function getRandom(a,b){
    var max = Math.max(a,b)
    var min = Math.min(a,b)
    return parseInt(Math.random()*(max-min)) + min
}
var res = getRandom()
console.log(res)

// 随机数的封装：2.生成[a,b]随机数
// 方法一、向上取整；方法二、+1
function getRandom(a,b){
    var max = Math.max(a,b)
    var min = Math.min(a,b)
    return parseInt(Math.random()*(max-min+1)) + min
}
var res = getRandom()
console.log(res)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、时间对象

js内部提供了一个可以创建设置日期对象的内置函数，叫做Date函数

1. 时间对象的创建

var date = new Date()
console.log(date)

//1. 通过日期对象获取年份  日期对象.getFullYear()
var year = date.getFullYear()

//2. 通过日期对象获取月份  日期对象.getMonth()
var month = date.getMonth()+1
//js计算月份是从0开始数的，0~11，结果后面应该+1

//3. 通过日期对象获取天数  日期对象.getDate()
var day = date.getDate()

//4. 通过日期对象获取小时  日期对象.getHours()
var hour = date.getHours()

//5. 通过日期对象获取分钟  日期对象.getMinutes()
var minute = date.getMinutes

//6. 通过日期对象获取秒数  日期对象.getSeconds()
var second = date.getSeconds()

//7. 通过日期对象获取毫秒数  日期对象.getMilliseconds()
var millisecond = date.getMilliseconds()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2. 日期的格式化

转化成年月日：date.toLocaleDateString()

转换为时分秒：date.toLocaleTimeString()

转换为年月日时分秒：date.toLocaleString()

3. 设置日期对象

可以通过new Date()直接设置

var date = new Date("2022-11-11 12:00:00")

1. 通过日期对象设置年份 日期对象.setFullYear()

   date.setFulYear(2023)

2. 通过日期对象设置月份 日期对象.setMonth()

   date.setMonth(11)

3. 通过日期对象设置天数 日期对象.setDate()

   date.setDate(21)

4. 通过日期对象设置小时 日期对象.setHours()

   date.setHours(00)

5. 通过日期对象设置分钟 日期对象.setMinutes()

   date.setMinutes(00)

6. 通过日期对象设置秒数 日期对象.setSeconds()

   date.setSeconds(00)

7. 通过日期对象设置毫秒数 日期对象.setMilliseconds()

   date.setMilliseconds(00)

4. 时间戳的设置

标准时间：Thu Jan 01 1970 08:00:00 GMT+0800

当前时间/目标时间 到 标准时间的毫秒数

第一种方法：date.getTime()

var date = new Date()
console.log(date.getTime())//当前时间的时间戳
var date = new Date('2022-10-1 00:00:00')
console.log(date.getTime())//目标时间的时间戳
1
2
3
4

第二种方法：Date.parse('时间')

var date = new Date()
console.log(Date.parse('2022-10-1 00:00:00'))
1
2

第三种方法：使用+号（推荐方法）

var date = +new Date()
console.log(date)
1
2

三、定时器的使用

1. 定时器

让代码每隔一定的时间执行一次

定时器语法：window.setInterval(function){},毫秒数,回调函数（这个参数不常使用）

清除定时器语法：clearInterval(定时器的名字/定时器的返回值)

var timer1 = setInterval(function(){
    console.log('111')
},1000)
console.log(timer1) //第一个定时器返回就是1

function fn(){
    clearInterval(timer1)
    //clearInterval(1)
}
1
2
3
4
5
6
7
8
9

2. 延时器：延时/等待多长时间再运行程序

延时器语法：setTimeout(function(){},毫秒数)

清除延时器语法：clearTimeout(延时器的名字)

setTimeout(function(){
    alert('等待5秒后，弹窗')
},5000)
1
2
3

拓展：文本的导入 表示结果值放在页面中显示

语法：DOM结构.innerHTML = 值

解释：标签，把XX放在当前这个标签里面

在js中最简单的获取DOM结构的方法是绑定id属性

案例1：获取本地时间并让时间动起来

案例2：倒计时

四、异步代码执行机制

1. 非异步执行代码
   • 按照从上到下的顺序，从左到右的顺序执行
   • 依次执行每一句代码，如果上一句没有执行完毕，下一句就等待
2. 异步执行代码
   • 当代码执行遇到异步的时候，会把该代码放在异步队列中等待
   • 等到所有的同步代码执行完毕后，再开始执行异步队列中的代码
3. 两种定时器就是异步代码

console.log("aa")
setInterval(function(){
    console.log("bb")
},0)
console.log("cc")
// aa cc bb
1
2
3
4
5
6

总结：先执行定时器外的代码，再执行定时器内的代码（事件轮询）