首页 前端知识 js之日期函数Date

js之日期函数Date

2024-03-07 08:03:53 前端知识 前端哥 137 317 我要收藏
/* 
常用得九种内置函数:
Number()  String()  Boolean()  Date()  Function() Object() Array()  RegExp() 正则  Error() 错误函数
*/

日期函数

使用API获取到电脑本地当前这一秒的时间

日期的获取

Date 对象用于处理日期与时间。

创建 Date 对象: new Date()

以下四种方法同样可以创建 Date 对象:

var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

 常用:

var date = new Date()

获取年月日

// 获取年月日
var y = d.getFullYear(); 
// ['一月', '二月']
// 注意:月份要 + 1
var m = d.getMonth() + 1
var r = d.getDate()
console.log(y + '年' + m + '月' + r + '日');

时分秒

// 时分秒
var s = d.getHours()
var f = d.getMinutes()
var x = d.getSeconds() 
console.log(s + '时' + f + '分' + x + '秒');

获取星期

// 获取星期
var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var w = d.getDay()
console.log(week[w]);

时钟

auto() // 解决一秒得空白
setInterval(auto, 1000)

function auto() {
    var d = new Date()


    // 获取年月日
    var y = d.getFullYear();

    var m = d.getMonth() + 1
    var r = d.getDate()
    console.log(y + '年' + m + '月' + r + '日');


    // 时分秒
    var s = d.getHours()
    var f = d.getMinutes()
    var x = d.getSeconds()
    console.log(s + '时' + f + '分' + x + '秒');

    // 获取星期
    var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    var w = d.getDay()
    console.log(week[w]);

    document.body.innerHTML = y + '年' + m + '月' + r + '日' + week[w] + s + '时' + f + '分' + x + '秒'
}

补零函数 

// 补零函数
function zero(n) {
    return n >= 10 ? n : '0' + n
}

时间计算

时间戳

就是时间从1970零点零分零秒到当前这个时间之间得毫秒数,数值类型是number

var d = new Date()
console.log(d.getTime());

console.log(Date.now());

JavaScript获得时间戳的方法有五种,后四种都是通过实例化时间对象new Date() 来进一步获取当前的时间戳,JavaScript处理时间主要使用时间对象Date。设置未来时间

方法一:Date.now()

Date.now()可以获得当前的时间戳:

console.log(Date.now()) //1642471441587

方法二:Date.parse()

Date.parse()将字符串或者时间对象直接转化成时间戳:

Date.parse(new Date()) //1642471535000
Date.parse("2022/1/18 10:05") //1642471500000

注意:不推荐这种办法,毫秒级别的数值被转化为000。

方法三:valueOf()

通过valueOf()函数返回指定对象的原始值获得准确的时间戳值:

(new Date()).valueOf() //1642471624512

方法四:getTime()

通过原型方法直接获得当前时间的毫秒值,准确:

new Date().getTime() //1642471711588

方法五:Number

将时间对象转化为一个number类型的数值,即时间戳

Number(new Date()) //1642471746435

 

设置未来时间

var d = new Date()

// 设置未来时间
// 1、传入数字(月份 - 1) 用逗号隔开
var endTime = new Date(2023, 4, 1, 11, 11, 11)
console.log(endTime);
console.log(endTime.getTime()); // 未来时间转换成时间戳

// 2、传入字符串 - 月份正常传入
var endTime1 = new Date('2023,5,1 11:11:11')
console.log(endTime1);
console.log(endTime1.getTime()); // 未来时间转换成时间戳

二、js时间戳转时间

我们可以接用 new Date(时间戳) 格式转化获得当前时间,比如:

new Date(1472048779952)
Wed Aug 24 2016 22:26:19 GMT+0800 (中国标准时间)

注意:时间戳参数必须是Number类型,如果是字符串,解析结果:Invalid Date。

如果后端直接返回时间戳给前端,前端如何转换呢?下面介绍2种实现方式

方法一:生成'2022/1/18 上午10:09 '格式

getLocalTime(n) {   
   return new Date(parseInt(n)).toLocaleString().replace(/:\d{1,2}$/,' ');   
}   
getLocalTime(1642471746435) //'2022/1/18 上午10:09 '

 

也可以用如下,想取几位就几位,注意,空格也算!

function getLocalTime(n) {   
    return new Date(parseInt(n)).toLocaleString().substr(0,14)
}   
getLocalTime(1642471746435) //'2022/1/18 上午10'

或者利用正则:

function  getLocalTime(n){
   return new Date(parseInt(n)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}
getLocalTime  (1642471746435)  //'2022/1/18 上午10:09:06'

方法二:生成'yyyy-MM-dd hh:mm:ss '格式

先转换为data对象,然后利用拼接正则等手段来实现:

function getData(n){
  n=new Date(n)
  return n.toLocaleDateString().replace(/\//g, "-") + " " + n.toTimeString().substr(0, 8)
}
getData(1642471746435) //'2022-1-18 10:09:06'

不过这样转换在某些浏览器上会出现不理想的效果,因为toLocaleDateString()方法是因浏览器而异的,比如 IE为"2016年8月24日 22:26:19"格式 ;搜狗为"Wednesday, August 24, 2016 22:39:42"

可以通过分别获取时间的年月日进行拼接,这样兼容性更好:

function getData(n) {
  let now = new Date(n),
    y = now.getFullYear(),
    m = now.getMonth() + 1,
    d = now.getDate();
  return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
}
getData(1642471746435) //'2022-1-18 10:09:06'

Date 对象属性

属性描述
constructor返回对创建此对象的 Date 函数的引用。
prototype使您有能力向对象添加属性和方法。

constructor

onstructor 属性返回对创建此对象的 Date 函数的引用。

返回创建Date对象的函数原型:

myDate.constructor;

结果输出:

function Date() { [native code] }

 prototype创建一个新的日期对象方法:

Date.prototype.myMet=function()
{
if (this.getMonth()==0){this.myProp="January"};
if (this.getMonth()==1){this.myProp="February"};
if (this.getMonth()==2){this.myProp="March"};
if (this.getMonth()==3){this.myProp="April"};
if (this.getMonth()==4){this.myProp="May"};
if (this.getMonth()==5){this.myProp="June"};
if (this.getMonth()==6){this.myProp="July"};
if (this.getMonth()==7){this.myProp="August"};
if (this.getMonth()==8){this.myProp="Spetember"};
if (this.getMonth()==9){this.myProp="October"};
if (this.getMonth()==10){this.myProp="November"};
if (this.getMonth()==11){this.myProp="December"};
}

 创建一个 Date 对象,调用对象的 myMet 方法:

var d = new Date();
d.myMet();
var monthname = d.myProp;

 monthname 输出结果:

var d = new Date(); d.myMet(); document.write(d.myProp);

定义和用法

prototype 属性使您有能力向对象添加属性和方法。

当构造一个原型,所有的日期对象都会默认添加属性和方法。 

注意: 可将属性和方法添加到原型中,但不能为对象分配其他原型。 但是,可以向用户定

注意: Prototype是一个全局属性,这对于几乎全部的JavaScript对象。

语法

Date.prototype.name=value
方法描述
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()从 Date 对象以四位数字返回年份。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()根据世界时从 Date 对象返回四位数的年份。
getUTCHours()根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()已废弃。 请使用 getFullYear() 方法代替。
parse()返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate()设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()设置 Date 对象中的年份(四位数字)。
setHours()设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()设置 Date 对象中月份 (0 ~ 11)。
setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()setTime() 方法以毫秒设置 Date 对象。
setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours()根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()已废弃。请使用 setFullYear() 方法代替。
toDateString()把 Date 对象的日期部分转换为字符串。
toGMTString()已废弃。请使用 toUTCString() 方法代替。
toISOString()使用 ISO 标准返回字符串的日期格式。
toJSON()以 JSON 数据格式返回日期字符串。
toLocaleDateString()根据本地时间格式,把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleString()根据本地时间格式,把 Date 对象转换为字符串。
toString()把 Date 对象转换为字符串。
toTimeString()把 Date 对象的时间部分转换为字符串。
toUTCString()

根据世界时,把 Date 对象转换为字符串。

实例:

var today = new Date();
var UTCstring = today.toUTCString();
UTC()根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3354.html
标签
评论
发布的文章

JQuery简介与解析

2024-03-01 12:03:31

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!