15 Date
js提供的内置构造函数，专门用来获取时间的
15-1 new Date()
-
new Date()在不传递参数的情况下是默认返回当前时间var time = new Date() console.log(time) // 当前时间 Fri Mar 01 2019 13:11:23 GMT+0800 (中国标准时间) -
new Date()在传入参数的时候，可以获取到一个你传递进去的时间var time = new Date('2019-03-03 13:11:11') console.log(time) // Sun Mar 03 2019 13:11:11 GMT+0800 (中国标准时间) -
new Date()传递的参数有多种情况-
传递两个数字，第一个表示年，第二个表示月份
var time = new Date(2019, 00) // 月份从 0 开始计数，0 表示 1月，11 表示 12月 console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间) -
传递三个数字，前两个不变，第三个表示该月份的第几天，从 1 到 31
var time = new Date(2019, 00, 05) console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中国标准时间) -
传递四个数字，前三个不变，第四个表示当天的几点，从 0 到 23
var time = new Date(2019, 00, 05, 22) console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中国标准时间) -
传递五个数字，前四个不变，第五个表示的是该小时的多少分钟，从 0 到 59
var time = new Date(2019, 00, 05, 22, 33) console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中国标准时间) -
传递六个数字，前五个不变，第六个表示该分钟的多少秒，从 0 到 59
var time = new Date(2019, 00, 05, 22, 33, 55) console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中国标准时间) -
传入字符串的形式
console.log(new Date('2019')) // Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02')) // Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-03')) // Sun Feb 03 2019 08:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-03 13:')) // Sun Feb 03 2019 13:00:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-03 13:13:')) // Sun Feb 03 2019 13:13:00 GMT+0800 (中国标准时间) console.log(new Date('2019-02-03 13:13:13')) // Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)
-
var date = new Date()
console.log(date) //自动转为字符串
//new Date传参
//1个传参 毫秒数
var date1= new Date(10000)
console.log(date1)
//计时起点1970 1 1 0:0:0
// 1970 1 1 0:0:1
//THU Jan 01 1970 08:00:10 GMT+0800 (中国标准时间)+8
// 2个参数 3个参
//var date2 = new Date(2023,0,3,10,10,10)
// 年 月 日 时 分 秒
var date2 = new Date(2023,0)
//Sun Jan 01 2023 00:00:00 GMT+0800
var date2 = new Date(2023,0,3)
//Sun Jan 03 2023 00:00:00 GMT+0800
console.log(date2)
//字符串
//两种写法
// var date3= new Date("2023-10-10 10:10:10")
var date3= new Date("2023/10/10 10:10:10")
console.log(date3)
15-2 将日期字符串格式化成指定内容
- 比如我们得到的时间字符串是
Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间) - 我指向得到这个日期中是那一年，我们就要靠截取字符串的形式得到
- 但是现在
js为我们提供了一系列的方法来得到里面的指定内容
1. getFullYear
-
getFullYear()方式是得到指定字符串中的哪一年var time = new Date(2019, 03, 03, 08, 00, 22) console.log(time.getFullYear()) // 2019
2. getMonth
-
getMonth()方法是得到指定字符串中的哪一个月份var time = new Date(2019, 03, 03, 08, 00, 22) console.log(time.getMonth()) // 3- 这里要有一个注意的地方
- 月份是从 0 开始数的
- 0 表示 1月，1 表示 2月，依此类推
3. getDate
-
getDate()方法是得到指定字符串中的哪一天var time = new Date(2019, 03, 03, 08, 00, 22) console.log(time.getDate()) // 3
4.getDay
-
getDay()方法是得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）var time = new Date(2019, 03, 08, 08, 00, 22) console.log(time.getDay()) // 1
5.getHours
-
getHours()方法是得到指定字符串中的哪小时var time = new Date(2019, 03, 03, 08, 00, 22) console.log(time.getHours()) // 8
6.getMinutes
-
getMinutes()方法是得到指定字符串中的哪分钟var time = new Date(2019, 03, 03, 08, 00, 22) console.log(time.getMinutes()) // 0
7.getSeconds
-
getSeconds()方法是得到指定字符串中的哪秒钟var time = new Date(2019, 03, 03, 08, 00, 22) console.log(time.getSeconds()) // 22
8.getTime
-
getTime()``getMilliseconds()方法是得到执行时间到格林威治时间的毫秒数var time = new Date(2019, 03, 08, 08, 00, 22) console.log(time.getTime()) // 1554681622000
9.获取时间差
- 是指获取两个时间点之间相差的时间
- 在 js 中是不能用时间直接做 减法 的
- 我们需要一些特殊的操作
- 在编程的世界里面，有一个特殊的时间，是
1970年01月01日00时00分00秒 - 这个时间我们叫做
格林威治时间 - 所有的编程世界里面，这个时间都是一样的，而且
格林威治时间的数字是 0 - 从
格林威治时间开始，每经过1毫秒，数字就会 + 1 - 所以我们可以获取到任意一个时间节点到
格林威治时间的毫秒数 - 然后在用两个毫秒数相减，就能得到两个时间点之间相差的毫秒数
- 我们在通过这个毫秒数得到准确的时间
var date = new Date()
console.log(date) //自动转为字符串
//getFullYear()
console.log(date.getFullYear())
//getMonth() 0-11===>1-12
console.log(date.getMonth())
//getDate()
console.log(date.getDate())
//getDay() 周日0 周一-周六 1-6
console.log(date.getDay())
//getHours
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
console.log(date.getMilliseconds())
//getTime() 时间戳
console.log(date.getTime())
// console.log(new Date(1653280060490))
// 设置 set
console.log(date)
date.setFullYear(2025)
console.log(date)
date.setMonth(5)
console.log(date)
date.setDate(25)
console.log(date)
date.setHours(13)
console.log(date)
date.setMinutes(50)
console.log(date)
date.setSeconds(59)
console.log(date)
date.setTime(1653280060490)
console.log(date)
16 定时器
- 在
js里面，有两种定时器，倒计时定时器 和 间隔定时器
16-1 倒计时定时器
-
倒计时多少时间以后执行函数
-
语法：
setTimeout(要执行的函数，多长时间以后执行) -
会在你设定的时间以后，执行函数
var timerId = setTimeout(function () { console.log('我执行了') }, 1000) console.log(timerId) // 返回值为1- 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
- 所以会在页面打开 1 秒钟以后执行函数
- 只执行一次，就不再执行了
- 返回值是，当前这个定时器是页面中的第几个定时器
16-2 间隔定时器
-
每间隔多少时间就执行一次函数
-
语法：
setInterval(要执行的函数，间隔多少时间)var timerId = setInterval(function () { console.log('我执行了') }, 1000)- 时间和刚才一样，是按照毫秒进行计算的
- 每间隔 1 秒钟执行一次函数
- 只要不关闭，会一直执行
- 返回值是，当前这个定时器是页面中的第几个定时器
16-3 定时器的返回值
-
设置定时器的时候，他的返回值是部分
setTimeout和setInterval的 -
只要有一个定时器，那么就是一个数字
var timerId = setTimeout(function () { console.log('倒计时定时器') }, 1000) var timerId2 = setInterval(function () { console.log('间隔定时器') }, 1000) console.log(timerId) // 1 console.log(timerId2) // 2
16-4 关闭定时器
-
我们刚才提到过一个
timerId，是表示这个定时器是页面上的第几个定时器 -
这个
timerId就是用来关闭定时器的数字 -
我们有两个方法来关闭定时器
clearTimeout和clearIntervalvar timerId = setTimeout(function () { console.log('倒计时定时器') }, 1000) clearTimeout(timerId)- 关闭以后，定时器就不会在执行了
var timerId2 = setInterval(function () { console.log('间隔定时器') }, 1000) coearInterval(timerId2)- 关闭以后定时器就不会在执行了
-
原则上是
clearTimeout关闭setTimeoutclearInterval关闭setInterval
-
但是其实是可以通用的，他们可以混着使用
var timerId = setTimeout(function () { console.log('倒计时定时器') }, 1000) // 关闭倒计时定时器 clearInterval(timerId) var timerId2 = setInterval(function () { console.log('间隔定时器') }, 1000) // 关闭间隔定时器 clearTimeout(timerId2)
<button id="btn1" >清除定时器-延时</button>
<button id="btn2">清除定时器-间隔</button>
<script>
//倒计时 (延时计时器)
//倒计时多少时间以后执行函数
//window.alert()
var time1= setTimeout(function(){
console.log("kerwin")
},2000) //注册定时器
//setInterval 间隔定时器
//每间隔多少时间就执行一次函数
var time2= setInterval(function(){
console.log(new Date())
},1000) //注册间隔定时器
console.log(time1,time2)
// clearTimeout(time1) //返回值 1 先注册计数为1
//clear 清掉
// clearInterval(time2) //返回值 2
// 返回值：为了将来能清掉它
//id可以直接写
console.log(btn1,btn2) //直接通过id，拿到按钮对象
btn1.onclick = function(){
console.log("btn1 click")
clearTimeout(time1)
}
btn2.onclick = function(){
console.log("btn2 click")
clearInterval(time2)
}
// 异步执行问题, 异步在同步执行完了才执行
// 同步， 异步
console.log("111111")
setTimeout(function(){
console.log("kerwin")
},1000)
//此函数延迟1秒执行，所以会先执行下面的，再执行它
//就算写成0秒也是异步执行
console.log("2222222")
/*111111
2222222
kerwin*/
//事件循环， 宏任务
// while(true){} 同步执行死循环，异步无法执行
案例：倒计时
<div id="box"></div>
<script>
//var currentDate = new Date()
var targetDate = new Date("2022/6/18")
function diffTime(current,target){
var sub = Math.ceil((target-current)/1000)
//向上取整
// console.log(sub) 秒
//天
var day = parseInt(sub/(60*60*24))
// parseInt 取整 直接舍小数
// console.log(day)
//时
var hours =parseInt(sub%(60*60*24) / (60*60))
//%取余，再/3600，得小时
//分
var minutes = parseInt(sub%(60*60)/60)
//对小时取余后再得分钟
var seconds = sub%60
//分钟取余得秒
// console.log(hours)
var obj = {
day:day,
hours:hours,
minutes:minutes,
seconds:seconds
}
return obj
}
setInterval(function(){
var currentDate = new Date() // 重新获取当前最新时间
var res= diffTime(currentDate,targetDate)
// document.write(`京东618-${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`)
// document.write("<br>")
// console.log(box)
box.innerHTML = `京东618-${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`
},1000)
</script>
