Day06.日期及日期对象讲解(学习日记6)

最新推荐文章于 2024-07-19 15:16:23 发布

Night9u_

最新推荐文章于 2024-07-19 15:16:23 发布

阅读量151

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/Night9u_/article/details/129032007

版权

日期对象

概述

日期对象是用于表示日期时间的一个对象包含对应设置日期时间及获取日期时间的方法.

日期对象的声明

使用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>