【JS】6--Date时间对象

时间对象

前置知识
JavaScript中的时间是以 1970年 1月1日 00:00:00 以来的毫秒数来储存数据类型。
Data对象的范围是相对距离UTC1970年1月1日的前后100,000,000天。

1. 创建一个时间对象:

let d = new Date([params]);

参数params可以是:

  • 无参数:默认创建今天的日期和时间。
  • 一个符合以下格式的表示日期的字符串:

"月 日, 年 时:分:秒."或者"年月日 时分秒"

创建一个日期 时间为 2020年4月20日(月份从0开始)
let d = new Date("2020-3-20");

 一个年,月,日的整型值的集合:
let d = new Date(2018, 12, 20);

一个年,月,日,时,分,秒的集合:
let d = new Date(2018, 12, 20, 23, 20, 10);

如果你省略时、分、秒,那么他们的值将被设置为0。

这里Date对象涉及到的方法特别多,请移步W3school JavaScript Date 对象

2. 获取日期

  1. 实例化当前日期
    var d = new Date();
  • getFullYear(); 年
  • getMonth() ; 月份 0-11
  • getDate(); 日期 1-31
  • getDay(); 星期 0-6
  • getHours(); 小时
  • getMinutes(); 分
  • getSeconds(); 秒
  • getTime(); 返回该日期与1970年1月1日的时间差
<div id="app"></div>
    <script>
        function showTime(){
            var d = new Date();
            console.log("当前时间:",d);
            //当前时间:Wed Aug 05 2020 17:14:51 GMT+0800 (CST)
            
            var y = d.getFullYear();
            console.log("当前年:",y);
            
            var m = d.getMonth()+1;
            console.log("当前月:",m);
            
            var D = d.getDate();
            console.log("当前日:",D);
            
            var H = d.getHours();
            console.log("当前时:",H);
            
            var M = d.getMinutes();
            console.log("当前分:",M);
            
            var S = d.getSeconds();
            console.log("当前秒:",S);
            
            var week = d.getDay();
            console.log("当前星期:",week);

            // var timer;
            // if(H>=12){
            //  H = H-12;
            //  timer ="pm";
            // }else{
            //  timer = "am";
            // }

            // switch(week){
            //  case 0:
            //      week = "日";
            //      break;
            // }


            // function fn(num){
            //  return num>10?num:"0"+num;
            // }

            //document.write(`${fn(H)}`);
            var app = document.getElementById("app");
            app.innerHTML=y+"年"+m+"月"+D+"日 "+H+":"+M+":"+S;
        }
        showTime();
        // 思路:每隔1秒执行showTime一次
        setInterval(showTime,1000);
        // 每隔1000毫秒 调用showTime一次
    </script>

间隔调用(多次)

var id = setInterval(fun,1000) ------ 每隔1秒执行一次fun函数
clearInterval(id); ---------停止间隔调用

setinterval(function(){
    ...
},1000)

延迟调用(1次)

var id = setTimeout(fun,2000) -------- 延迟2秒调用1次fun函数
clearTimeout(id): ------- 停止延迟调用

setTimeout(function(){
    ...
},2000)

3. Date对象的方法

常用处理的方法有以下几类:

  • "set":用于设置Date对象的日期和时间的值。
  • "get":用去获取Date对象的日期和时间的值。
  • "to":用于返回Date对象的字符串格式的值。
  • "parseUTC":用于解析Date字符串。

设置日期
setFullYear(2020);
setMonth(11);
toLocalString ----------返回一个本地化的时间

需要注意的Date对象的一些数值问题:

  • 秒/分: 0 - 59;
  • 时: 0 - 23;
  • 星期: 0(周日) - 6(周六)
  • 日期: 1 - 31
  • 月份: 0(一月) - 11(十二月)
  • 年份: 从1900开始的年数

例如:

let d = new Date('2018-12-10');
let d1 = d.getMonth();    // 11
let d2 = d.getFullYear(); // 2018

获取今年剩下的天数:

let d = new Date();
let e = new Date(2018, 11, 31, 23, 59, 59, 999);  // 设置年月日时分秒
e.setFullYear(d.getFullYear); // 设置为今年
let m = 24 * 60 * 60 * 1000;  // 每日毫秒数
let result = (e.getTime() - d.getTime()) / m;
result = Math.round(result);  // 返回今年剩余天数

这里Date对象涉及到的方法特别多,请移步W3school JavaScript Date 对象

注意:

格林尼治标准时间(GMT)英国、爱尔兰、冰岛和葡萄牙属于该时区。这个时区与中国北京时间的时差是8个小时,也就是说比北京时间晚8个小时。

4. 使用Date对象操作日期

1. 设置日期

使用Date对象的函数可以方便的对日期进行操作。
在下面的例子中我们设置一个日期对象为一个指定的日期值(2010年1月14日):

var myDate=new Date()
myDate.setFullYear(2010,0,14)

在下面的例子中我们将myDate的值设为5天后:

var myDate=new Date()
myDate.setDate(myDate.getDate()+5)

注意:如果增加5天后进入另外一个月或一年,Date对象会自动处理的。
———————————————————————————————————

2. 比较时间

使用Date对象可以对日期进行比较。 下面的例子将今天的日期与2010年1月14日进行比较:

var myDate=new Date()
myDate.setFullYear(2010,0,14)
var today = new Date()

if (myDate>today){
    alert("今天还没到2010年1月14日")
}
else{
    alert("今天已经过了2010年1月14日")
}

——————————————————————————–

还可以比较两个日期相差多少天:

let d1 = new Date('2018-10-10');
let d2 = new Date('2018-11-11');
let d3 = (d2 - d1) / (1000 * 60 * 60 * 24);  // 32

3.计算N天后星期几

function d (num){
    if(typeof Number(num) === 'number'){
        let d1 = new Date();
        let d2 = d1.setDate(d1.getDate() + Number(num));
        let n = new Date(d2).getDay();
        let s = '';
        switch (n){
            case 0 : 
                s = "星期天";
                break;
            case 1 : 
                s = "星期一";
                break;
            case 2 : 
                s = "星期二";
                break;
            case 3 : 
                s = "星期三";
                break;
            case 4 : 
                s = "星期四";
                break;
            case 5 : 
                s = "星期五";
                break;
            case 6 : 
                s = "星期六";
                break;
        }
        return s;
    }else {
        alert('请输入正确数字!');
    }
}

4. 格式化日期

常见的日期格式化为字符串的方法有这些:

  • toDateString()——以特定于实现的格式显示星期几、月、日和年;
  • toTimeString()——以特定于实现的格式显示时、分、秒和时区;
  • toLocaleDateString()——以特定与地区的格式显示星期几、月、日和年;
  • toLocaleTimeString()——以特定于实现的格式显示时、分、秒;
  • toUTCString()——以特定于实现的格式完整的UTC日期。

获取并格式化日期:年-月-日

function d (date){
    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
d(new Date()); // "2018-12-20"

日期字符串转为 年-月-日

function d (str){
    return new Date(Date.parse(str.replace(/-/g, '/')));
    // 或者
    // return new Date(str.replace(/-/g, '/'));
}

获取当前星期几

let d = "今天是星期" + "日一二三四五六".charat(new Date().getDay());

5. 获取某年某月的天数

这里有个小技巧,若给new Date()传入一个如aaaa/aa/0参数时,可以得到aa月的前一个月的最后一天,如传入2018/12/0会得到2018/11/30

值得注意的是: 在Chrome浏览器上并不支持,会返回Invalid Date导致结果为NaN,但是我们可以使用aaaa,aa,0形式作为参数,下面分别写出这两种:

// aaaa/aa/0形式 只要传入年和月 
function d (y, m){
    m = parseInt(m, 10) + 1;
    let r = new Date(y + '/' + m + '/0');
    return r.getDate();
}

// aaaa,aa,0形式 只要传入年和月 
function d (y, m){
    m = parseInt(m, 10) + 1;
    let r = new Date(y, m, 0);
    return r.getDate();
}

6. 获取上个月/下个月日期("yyyy-mm-dd")

传入参数的格式"yyyy-mm-dd",其实也可以是Date()对象,大家可以自行尝试。

// 上个月 date格式"yyyy-mm-dd"
function my_date (date){
    let arr = date.split('-');
    let y = arr[0] , m = arr[1], d = arr[2];  // 获取当前的年月日
    // ES6语法 let [y,m,d] = arr;
    let day = new Date(y,m,0);
    day = day.getDate(); // 获取当前月份的天数

    let y2 = y, m2 = parseInt(m) - 1;
    if(m2 == 0){
        y2 = parseInt(y2) -1;
        m2 = 12;
    }

    let d2 = d, day2 = new Date(y2, m2, 0);
    day2 = day2.getDate();
    if(d2 > day2){
        d2 = day2;
    }
    if(m2 < 10){
        m2 = '0' + m2;
    }

    return y2 + '-' + m2 + '-' + d2;
}
my_date('2018-1-20');  //"2017-12-20"

下个月的计算方法也是相似:

// 上个月 date格式"yyyy-mm-dd"
function my_date (date){
    let arr = date.split('-');
    let y = arr[0] , m = arr[1], d = arr[2];  // 获取当前的年月日
    let day = new Date(y,m,0);
    day = day.getDate(); // 获取当前月份的天数

    // 和计算上个月的区别   
    let y2 = y, m2 = parseInt(m) + 1;
    if(m2 == 13){   
        y2 = parseInt(y2) + 1;
        m2 = 1;
    }

    let d2 = d, day2 = new Date(y2, m2, 0);
    day2 = day2.getDate();
    if(d2 > day2){
        d2 = day2;
    }
    if(m2 < 10){
        m2 = '0' + m2;
    }

    return y2 + '-' + m2 + '-' + d2;
}
my_date('2018-12-20');  // "2019-01-20"

1. getTime()函数

使用getTime()函数计算自1970年后已经过了多少年

<html>
<body><script type="text/javascript">
var minutes = 1000*60
var hours = minutes*60
var days = hours*24
var years = days*365
var d = new Date()
var t = d.getTime()
var y = t/years

document.write("It’s been: " + y + " years since 1970/01/01!")

</script>
</body>
</html>

———————————————————————–

2. 函数setFullYear()

使用setFullYear()函数来设置一个日期

<html>
<body><script type="text/javascript">
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</script>
</body>
</html>

—————————————————————————

3. 函数toUTCString()

使用toUTCString()函数将今天的日期转换为一个字符串

<html>
<body><script type="text/javascript">
var d = new Date()
document.write (d.toUTCString())
</script>
</body>
</html>

——————————————————————————

4. 函数getDay()

使用getDay()函数和一个数组来写出星期几

<html>
<body><script type="text/javascript">
var d=new Date()
var weekday=["周日","周一","周二","周三","周四","周五,"周六"]
document.write("今天是 " + weekday[d.getDay()])
</script>
</body>
</html>

——————————————————————————–

5. 显示一个时钟

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()' ,500)
}
function checkTime(i){
    if (i<10){i="0" + i}
    return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

参考资料

1.MDN 数字和日期
2. JS日期Date详解与实例扩展

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容