js日期对象和对象及定时器

陈海超
158 阅读9分钟

日期对象和对象及定时器

日期对象

日期对象就是用于描述对应的日期时间的对象，Date日期时间对象主要有的操作是设置时间和获取时间。

声明

new 关键词声明的注意事项
  • 使用new关键词构建的都是对象（引用数据类型）
  • new关键词后面接的是对应的构造函数
  • 构造函数就是用于构造对象的函数（大写字母开头）
使用无参构造声明
var date = new Date() //获取当前的本地时间
console.log(date)
传入一个数值 （毫秒值）
//有参构造
// 传入一个数值 （它会认为是毫秒值 将这个毫秒值转换为当前的时间 加上初始时间 （格陵兰治时间 1970 1/1 00:00:00））
var date = new Date(1000 * 60 * 60) //加基础上加上一个小时
console.log(date) //1970 1/1 09:00:00 位于东八区在基础上+上一个小时
传入一个字符串 （对应格式的字符串）
//传入一个字符串 它会认为是对应的显示格式 (y表示年 m表示月 d表示天 h表示小时 M表示分钟 S表示秒钟)
//yyyy/mm/dd hh:MM:SS
var date = new Date("2013/12/10 10:10:10") //传入本地格式
console.log(date)
传入多个数值 (根据年月日时分秒的顺序)
//传入多个数值(最小俩个) 年 月（0-11） 日 时 分 秒
var date = new Date(2013,10) //2013年 11月
console.log(date)
var date = new Date(2013,10,12) //2013年 11月 12日
console.log(date)
var date = new Date(2013,10,12,15,10,20) //2013年 11月 12日 15时
console.log(date)
//传入一个字符串的时候 如果格式不对或者超出会出现 Invalid Date 
var date = new Date("2013/13/10 10:10:10") //传入本地格式
console.log(date) //Invalid Date 
//如果对应的在初始化时间的时候 传入的值超出了范围它会默认向上+1
var date = new Date(2013,13,32) 
console.log(date) //2014年 3月 4日
注意事项
  • 如果传入的是多个参数的数值，那么对应的月份取值为0-11，超出范围会自动向上进1.
  • 如果传入的是字符串，那么格式必须按照要求来，如果格式不正确或对应的超出范围那么会显示为invalid Date。
  • 如果传入的是一个数值，那么它会认为是毫秒值，会在1970年1月1日 0时0分0秒的基础上加上这个毫秒值。
  • 如果是无参构造，那么获取是本地的显示时间。

日期对象的方法

获取日期时间 （get）

  • getFullYear 获取年
  • getMonth 获取月
  • getDay 获取星期几
  • getDate 第几天
  • getHours 获取小时
  • getMinutes 获取分钟
  • getSeconds 获取秒钟
  • getMilliseconds 获取毫秒值
  • getTime 获取时间戳
  • getTimezoneOffset 获取时区的偏移分钟
  • getUTCHours 获取utc的相关小时
  • .....
//获取相关的方法 以get开头
var date = new Date()
//获取年
console.log(date.getFullYear())
//获取月
console.log(date.getMonth()) //0-11的值 0表示1月份 11表示12月份
//获取日
console.log(date.getDay()) //一个礼拜的第几天 0表示星期天
console.log(date.getDate()) //一个月的第几天
//获取时
console.log(date.getHours())
//获取分
console.log(date.getMinutes())
//获取秒
console.log(date.getSeconds())
//获取毫秒
console.log(date.getMilliseconds())
//获取时间戳 （离1970年1月1月0时0分0秒的毫秒值）
console.log(date.getTime())
//相关的utc时间 utc国际标准时间 中国标准时间为东八区 国际标准时间为0区
console.log(date.getUTCHours())
//获取时区的偏移量
console.log(date.getTimezoneOffset())

设置日期时间 （set）

  • setFullYear 设置年
  • setMonth 设置月
  • setDate 设置几天
  • setHours 设置小时
  • setMinutes 设置分钟
  • setSeconds 设置秒钟
  • setMilliseconds 设置毫秒值
  • setTime 设置离格陵兰治时间的毫秒值
  • setUTCHours 设置utc的小时
  • .....
//设置相关方法
//覆盖之前的值 如果超范围向上递增
date.setFullYear(2020)
date.setMonth(11) //设置为12月
date.setDate(45)  //超出范围 向上递增
date.setHours(12)
date.setMinutes(12)
date.setSeconds(12)
date.setMilliseconds(800)
console.log(date)
//类似于对应的new关键词传入一个参数（数值）
//以离1970年1月1日0时0分0秒的毫秒值来设置对应的时间
date.setTime(3600*1000)
console.log(date) //在1970年1月1日0时0分0秒基础上加了一个小时
//utc相关时间设置
date.setUTCHours(15)
console.log(date)

转字符串相关方法

  • toString 转为字符串
  • toLocalString 转为本地格式的字符串
  • toDateString 将对应的日期转为字符串
  • toTimeString 将对应的时间转为字符串
  • toLocaleDateString 将对应的日期转为本地格式的字符串
  • toLocaleTimeString 将对应的时间转为本地格式的字符串
  • toISOString 以-进行连接格式的字符串
  • toUTCString 转为utc时间字符串
  • toJSON 利用JSON.stringify方法来进行转换
//打印操作对于对象来说它会默认调用toString方法
console.log(date)
console.log(date.toString())
//以本地格式来进行显示
console.log(date.toLocaleString())
//显示对应的日期字符串
console.log(date.toDateString())
//显示对应的时间字符串
console.log(date.toTimeString())
//本地时间格式显示日期字符串
console.log(date.toLocaleDateString())
//本地时间格式显示时间字符串
console.log(date.toLocaleTimeString())
//toISOSString
console.log(date.toISOString())
//显示utc时间的字符串
console.log(date.toUTCString())
//toJSON转为json字符串 利用JSON.stringify方法
console.log(date.toJSON())

静态方法

Date.now() 获取当前的时间戳

console.log(Date.now())

Date.parse() 传入字符串返回时间戳

//parse方法 返回毫秒值
console.log(Date.parse('1970/1/1 09:00:00')) //返回3600 * 1000

练习

封装一个函数传入时间对象 返回对应的格式为xx年xx月xx天 xx小时xx分钟xx秒 星期x

function formatDateTime(date) {
    //获取年
    var year = date.getFullYear()
    //获取月
    var month = date.getMonth() + 1
    //获取日
    var d = date.getDate()
    //获取小时
    var h = date.getHours()
    //获取分钟
    var m = date.getMinutes()
    //获取秒
    var s = date.getSeconds()
    //获取星期
    var weekDay = date.getDay()
    //准备一个数组记录星期
    var weekDayArray = ['天', '一', '二', '三', '四', '五', '六']
    return `${year}年${month}月${d}日 ${h}小时${m}分钟${s}秒 星期${weekDayArray[weekDay]}`
}
var currentDate = new Date()
console.log(formatDateTime(currentDate))

封装一个函数传入俩个时间对象 计算他们之间离得时间 以xx天xx小时xx分钟显示

function reduceTime(date1,date2){
	//得到时间戳进行判断
	var firstTime = date1.getTime()
	var lastTime = date2.getTime()
	//计算 得到差值(毫秒值)
	var time = Math.abs(firstTime-lastTime)
	//得到对应的差距的天
	var day = parseInt(time/1000/60/60/24)
	//得到对应的差距小时和对应的分钟
	var hours = parseInt(time/1000/60/60%24)
	var minutes =  parseInt(time/1000/60%60)
	return `${day}天${hours}小时${minutes}分钟`
}
var firstDate = new Date('2010/10/10 05:20:30')
var lastDate = new Date('2010/11/18 06:20:30')
console.log(reduceTime(firstDate,lastDate))

封装一个函数 计算2023年1月20日五天后的日期 以xx年xx月xx天 xx小时xx分钟xx秒 星期x显示

function getDate(date,day){
	//得到当前的天 在对应的基础上加day
	var d = date.getDate() + day
	//然后设置给对应的当前的日期对象
	date.setDate(d)
	return date
}
console.log(formatDateTime(getDate(new Date('2023/01/20'),5)))

找2012年最后一个星期天的日期 以xx年xx月xx天 xx小时xx分钟xx秒 星期x格式显示

function getWeekDayToSeave(year){
	var date = new Date(year+1,0,1) //第二年第一天的日期
	//倒着数
	/*
	while(true){
	  //每次将对应的日期减1
	  date.setDate(date.getDate()-1)
	  if(date.getDay()==0){
	  	break
	  }
	}*/
	do{
		//每次将对应的日期减1
		date.setDate(date.getDate()-1)
	}while(date.getDay())
	return date
}
console.log(formatDateTime(getWeekDayToSeave(2012)))
注意事项

俩个日期比较的时候或者运算的时候会自动转为对应的时间戳

var date1 = new Date('2012/3/2')
var date2 = new Date('2012/10/1')
console.log(date1 == date2) //false 不会转为时间戳
console.log(date1 === date2) //false 不会转为时间戳
// 在比较大小的时候自动转为时间戳比较
console.log(date1>date2)  //会转为时间戳
console.log(date1<date2) //会转为时间戳
//-法运算 * / % 会转为时间戳
console.log(date1-date2)
console.log(date1*date2)
console.log(date1+date2) //不会转为时间戳

对象

对象其实一个引用数据类型的容器，主要存储在堆中，所有被new都是对象。所有的引用数据类型都是对象类型（万物皆对象）。

对象中的数据存储以key:value（键值对）。

对象的声明

字面量声明
var obj = {} //没有内容的对象
var obj = {name:'jack'} //一个key为name value为jack的对象
console.log({} == {}) //对象比较的地址 false
new关键词声明
var obj = new Object() //第二种声明

对象内容的存储及访问

对象中是以key:value进行存储 访问通过key来访问value

内容存储的形式
var obj = {name:'rose'} //key为name value为rose
//访问通过key来访问value
//对象名[key的字符串]
console.log(obj['name']) //访问key为name的值 rose
//通过对象名.对象的key来访问
console.log(obj.name) //访问key为name的值 rose
//给对象中的属性进行赋值操作也是对应的添加存储的方式
obj.age = 18 //添加了一个age的属性 它的值为18
obj['sex'] = '女' //添加一个sex的属性 它的值为女
对象中内容的访问
  • 通过对象名[key的字符串] 访问
  • 通过对象名.key访问

对象的增删改查操作

增
//给对象一个不存在的属性赋值它就会进行添加属性的操作
var obj = {}
obj.name = 'jack' //添加对应的name属性
obj['sex'] = '男' //添加对象的sex的属性
改
//给对象已经存在的属性进行重新赋值操作就是修改
var obj = {name:'jack'}
obj.name = 'rose' //将name属性值改为对应的rose
查
//通过对应的key来访问对应的值
var obj = {name:'tom'}
console.log(obj.name) //tom
//遍历操作 for in是专门用于遍历对象的 key为字符串
for(var key in obj){
	console.log(key,obj[key])
}

for in是用于遍历对象的 主要遍历是对象的key key值类型为字符串

删
//使用delete关键词
var obj = {name:'jack',age:'18'}
console.log(obj) 
delete obj.name //删除obj中的name属性
delete obj['age'] //删除obj中的age属性
console.log(obj)

对象中的内容

属性 （相关内容）
var obj = {name:'jack'} //属性
obj.name //访问name属性
obj['name'] //访问name属性
函数 （操作代码）
var obj = {
	sayHello:function(){ //函数
		console.log('hello') 
	}
}
obj.sayHello() //执行obj的sayHello方法
obj['sayHello']() //执行obj的sayHello方法

this

this是JavaScript中的一个关键字 ，主要表示当前对象的引用。全局的this指向当前的global（全局）对象，在浏览器中当前的global对象为window (打开的浏览器窗口)。this一般存在于函数内。

this的指向

对象的方法中的this指向当前的对象

var obj = {
	print:function(){
		console.log(this)
	}
}
//相当于 obj调用对应的print方法 this就指向对应的obj
obj.print() //当前的这个obj对象

事件执行时调用的函数中的this指向当前的触发的元素对象

<button id="btn">点击了</button>
<script>
    //给对应的按钮添加点击事件
    document.getElementById('btn').onclick = handler //事件驱动
    function handler(){
        console.log(this) //指向当前触发的按钮
    }
</script>

全局的this指向global(浏览器的global对象为window)对象

<button id="btn" onclick="handler()">点击了</button>
<script>
    function handler(){
        console.log(this) //指向window
    }
    handler() //指向window
</script>

全局对象拥有的特性

  • 所有的全局变量都是它的属性
  • 所有的全局的方法都是它的方法
  • global对象可以被省略

window对象的俩个方法

定时器

setInterval 执行多遍

setInterval(函数,时间(毫秒值),传递的参数)
使用
传入匿名函数
var i = 0
//一秒钟执行一次i++的操作 打印i
setInterval(function(){
	i++
	console.log(i)
},1000)
传入具名函数

第一种方式

//传入具名函数
var id = setInterval(handler, 1000)
function handler() { //异步代码
    i++
    console.log(i)
    //判断释放达到了5 达到5清除对应的定时器
    if(i == 5){
        clearInterval(id)
    }
}
console.log(id) //同步代码 同步先执行 再执行异步

第二种方式 （传入函数字符串调用 无法接收对应传入的参数）

var id = setInterval("handler()", 1000)
function handler() { //异步代码
    i++
    console.log(i)
    //判断释放达到了5 达到5清除对应的定时器
    if(i == 5){
        clearInterval(id)
    }
}
传递3个参数
//传递3个参数
function handler(arg){
    console.log(arg)
}
setInterval(handler,1000,20) //第三个参数会被传递给对应执行的函数 循环打印10隔1s
clearInterval 清除定时器 传入对应的定时器id
注意事项
  • 定时器一般要清除 不然会一直占内层，导致对应的内层泄漏 （没有用到的东西一直占内存空间）。
  • 对应的定时器会反复执行，然后它就会一直让你的变量保持引用状态，所以不要在对应的定时器中声明变量。
  • setInterval的第三个参数会传递给对应执行的函数作为参数。定时器的计时是以毫秒为单位
练习

计时器

 <span id="result">00:00:00</span> <button id="start">开始计时</button><button id="end">结束计时</button>
  <script>
    //获取按钮
    var start = document.getElementById('start')
    var end = document.getElementById('end')
    var time //定时器变量
    //获取span标签
    var result = document.getElementById('result')
    //给开始按钮添加事件
    start.onclick = function () {
      var h=0,m=0,s=0
      //在事件处理中使用对应的定时器开始计时
      time = setInterval(function(){
        s++
        //满60s 分钟+1
        if(s==60){
          m++
          s=0
        }
        //满60分钟小时+1
        if(m==60){
          h++
          m=0
        }
        //将结果显示在span标签中
        result.innerHTML = `${fn(h)}:${fn(m)}:${fn(s)}`
      },10)
    }
    //点击结束计时按钮 停止计时
    end.onclick = function () {
      //清除定时器
      clearInterval(time)
    }
    //补零函数
    function fn(n){
      //如果是1位前面加个0
      if(n<10){
        return '0'+n
      }
      return n
    }
  </script>

延时器

setTimeout 执行一遍

基础用法

setTimeOut用法是一样的

setTimeout(function(){
	console.log('hello')
},5000) //5秒钟后打印hello
练习

倒计时 5秒关闭弹窗

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <button id="btn">开始倒计时</button>
        <div id="show"><span id="seconds">5</span>秒钟后关闭</div>
        <script>
            //获取按钮
            var btn = document.getElementById('btn')
            //添加点击事件
            btn.onclick = function(){
                //在点击事件内开始倒计时
                var i = 5
                //定时器控制倒计时
                var timer = setInterval(function(){
                    i--
                    document.getElementById('seconds').innerHTML = i
                },1000)
                //倒计时结束让div不显示
                var time = setTimeout(function(){
                    //清除对应的定时器
                    clearInterval(timer)
                    //让div不显示
                    document.getElementById('show').style.display = "none"
                    //清除延时器 为了释放内存
                    clearTimeout(time)
                },6000)
                }

        </script>
    </body>
</html>
clearTimeout 清除延时器 （释放内存）

总结

定时器和延时器都是window对象的方法，里面的函数中的this指向window

setTimeout(function(){
    console.log(this) //window
},0)
setInterval(function(){
    console.log(this) //window
},1000)

定时器和延时器都是异步的（无关于间隔时间）

//异步代码执行一定在同步代码后面 同步代码要快于异步代码
setTimeout(function(){
    console.log(this) //window 后执行
},0)
console.log('hello') //先执行

第三方库

别人封装好的代码,你只需要调用就ok。

moment.js 用于格式化对应的日期时间的

引入 (cdn引入)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

使用

// moment() 传入对应的日期时间进行操作 默认不传为当前时间
//format 格式化 传入对应的格式字符串
//y 表示年 M表示月 DD表示日 h(12小时制)/H（24小时制）表示小时  m表示分钟 s表示秒钟  ms表示毫秒
console.log( moment().format('yyyy-MM-DD HH:mm:ss'))
console.log( moment(new Date("2013/11/11 20:18:12")).format('yyyy-MM-DD HH:mm:ss'))

官方文档链接

avatar
文章
阅读
粉丝