日期对象
概述
日期对象是用于表示日期时间的一个对象 包含对应设置日期时间及获取日期时间的方法.
日期对象的声明
使用new关键词声明
new Date()
无参构造声明(构造对象的方法叫做构造函数)
- 构造函数首字母大写
- 使用new关键词调用构造函数产生新的对象
传入字符串作为参数(格式不正确会出现 Invalid Date)
传递多个number类型的参数(如果值超出自动向上递增)
传递毫秒值来构造
日期对象的比对
日期对象的在比对过程中会自动转化为毫秒值进行相关的比对计算
日期对象的相关方法
get开头获取
- 获取年 getFullYear
- 获取月 getMonth (月份获取0-11)
- 获取日 getDate
- 获取星期几 getDay (星期天是0)
- 获取时 getHours
- 获取分 getMinutes
- 获取秒 getSeconds
- 获取毫秒 getMilliseconds
- 时间戳 getTime 离格林兰兹时间的毫秒值 时间戳 可以作为唯一标识
- 获取时区偏移量 getTimezoneOffset
获取UTC时间(抛除时间区的影响)
- getUTCHours
- ...
set开头设置
- 设置年 setFullYear
- 设置月月 setMonth (月份获取0-11)
- 设置日 setDate
- 设置星期几 setDay (星期天是0)
- 设置时 setHours
- 设置分 setMinutes
- 设置秒 setSeconds
- 设置毫秒 setMilliseconds
设置UTC时间(抛除时间区的影响)
- setUTCHours
- ...
转字符串相关的方法
练习
1.设计一个函数返回两个时间之间间隔的天数
function getDay(day1,day2){
var ms=Math.abs(day1-day2)
return parseInt(ms/1000/60/60/24)
}
console.log(getDay(new Day(),new Day('2003/3/20')));
2.设计一个函数返回一个时间七天后的时间 以YYY-mm-dd hh:MM:ss显示
function formatDate(date) {
return `${date.getFullYear()}-${fn(date.getMonth()+1)}-${fn(date.getDate())} ${fn(date.getHours())}:${fn(date.getMinutes())}:${fn(date.getSeconds())}`
}
function setDayToDate(date, day) {
date.setDate(date.getDate() + day)
return formatDate(date)
}
console.log(setDayToDate(new Date(), 7))
function fn(number) {
if (number < 10) {
return '0' + number
}
return number
}
3.计算今年一共过了几个星期
function getNowWeekCount() {
var start = new Date('2023/1/1')
var current = new Date()
var startWeekDay = start.getDay()
var currentWeekDay = current.getDay()
return parseInt((getDay(start, current) - (6 - startWeekDay) - currentWeekDay) / 7)
}
console.log(getNowWeekCount())
4.打印输出今年最后一个星期天的时间
function getLastSunDay() {
var date = new Date('2023/12/31')
while (true) {
if (date.getDay() == 0) {
return date
}
//从后往前数
date.setDate(date.getDate() --)
}
}
console.log(formatDate(getLastSunDay()))
对象
概述
对象是一个存储容器,他是一个引用数据类型.它里面可以存储一些属性(值)及方法(函数其实就是对应的动作),他里面存储是以key:value的形式进行存储(key是唯一的标识不可重复,value是值),可以通过key来访问对应的的value.
对象的声明(object)
- 赋值声明
- 以new关键词来调用构造函数进行声明(new object)
Object属于顶层父类 所有的其他对象都是他的子类
对象在比较的时候是比较地址
对象的增删改查
- 增(对象属性赋值)
- 删(delete关键词)
- 改(对象重新赋值)
- 查
this关键词
概述
this标识这个,this是一个指针引用没有特定的值,他是根据对应的调用着来执行其引用地址
对象中函数里的this指向当前对象
函数中的this指向调用函数的对象
- this在普通函数中指向其调用着,在全局范围内window在对象中调用者为当前对象
- 在事件处理中 this指向当前事件的派发者
Window中的两个函数
setInterval 定时器(在一定事件内循环执行某个操作)
写法
- 以匿名函数的形式
- 以具名函数函数的形式
- 以字符串的形式(不建议)
clearInterval 清楚定时器(必须要做 如果不做那么定时器将会无限执行)
setTimeout 延时器(延迟执行某个操作)
clearTimeout清楚延时器
总结
- setInterval和setTimeout是异步的 也就是说他不会阻塞正常代码的执行
- setInterval定时触发器线程计时完放入任务对象等待js引擎空闲再执行 他一定慢于js引擎直接执行的代码
- 同步比异步块
- 定时器和延时器开启后必须关闭否则会占用内容
- 不要在定时器中嵌套定时器(如果需要的话那么每一次都需要在外层的定时器都需要关闭内层定时器)
- 外层的定时器间隔时间一定要大于里层的间隔时间
案例
简易计时器
<div id="showText">00:00:00</div> <button id="start">开始计时</button>
<button id="stop">停止计时</button>
<script>
//获取所有的元素
var show = document.getElementById('showText')
var start = document.getElementById('start')
var stopBtn = document.getElementById('stop')
//定时器
var timer
//点击开始按钮开始计时
start.onclick = function () {
//清除上一次的定时器
clearInterval(timer)
var h = 0 //时
var m = 0 //分
var s = 0 //秒
//时间发生变化
timer = setInterval(function () {
//在每次变化的时候改变对应的showText里面的显示内容
s++
if(s==60){
m++
s=0
}
if(m==60){
h++
m=0
}
//将对应的内容进行拼接显示到对应的showText中
show.innerHTML = `${fn(h)}:${fn(m)}:${fn(s)}`
}, 1000)
}
//补零的方法
function fn(number){
if(number<10){
return '0'+number
}
return number
}
//点击停止按钮停止计时
stopBtn.onclick = function () {
//清除定时器
clearInterval(timer)
}
</script>
谢谢观看!
不知名选手铉
2023/2/14 20:36