日期对象-Date

<script type="text/javascript">
    // 创建 Date 对象: new Date()
    var date = new Date();

    //返回当日的日期和时间
    console.log(date);

    //dir输出内容的结构
    console.dir(date);

    //获取年
    console.log(date.getYear());//已被放弃
    console.log(date.getFullYear());//用这个

    //获取月 - 从 Date 对象返回月份 (0 ~ 11) 所以要+1
    console.log(date.getMonth() + 1);

    //获取日 - 从 Date 对象返回一个月中的某一天 (1 ~ 31)
    console.log(date.getDate());

    //获取星期几 从 Date 对象返回一周中的某一天 (0 ~ 6)
    console.log(date.getDay());

    //获取小时 - 返回 Date 对象的小时 (0 ~ 23)
    console.log(date.getHours());

    //获取分 - 返回 Date 对象的分钟 (0 ~ 59)
    console.log(date.getMinutes());

    //获取秒 - 返回 Date 对象的秒数 (0 ~ 59)
    console.log(date.getSeconds());

    //获取毫秒 - 返回 Date 对象的毫秒(0 ~ 999)
    console.log(date.getMilliseconds());

    //获取时间戳 - 1970年1月1日0时0分秒至今的毫秒数
    console.log(date.getTime());

    //返回本地时间与格林威治标准时间 (GMT) 的分钟差
    console.log(date.getUTCHours());

    //set-设置 get-获取
    //get有的set都有
</script>

1、创建Date对象

  • 在JavaScript中,创建日期对象必须使用“new语句”。使用关键字new新建日期对象时,常用的有2种:
方法一:
var 日期对象名 = new Date();
方法二:
var 日期对象名 = new Date(日期字符串);
  • 方法一用于获取当前系统的时间,输出格式为如下:


    image.png
  • 方法二的日期字符串可以是以下几种形式:
    (1)"2015-5-3"
    (2)"May 3,2015"
    (3)"2015/5/3"
var dt1 = new Date("2015-5-3");
var dt2 = new Date("May 3,2015");
var dt3 = new Date("2015/5/3");

2、Date对象方法

  • 日期对象Date的方法主要分为三大组:setXxx、getXxx和toXxx
  • setXxx用于设置时间和日期值;getXxx用于获取时间和日期值;toXxxx主要是将日期转换为指定格式


    Date对象方法

3、获取当前完整日期时间Date()

  • 很简单,就是直接使用Date()方法返回系统当前日期时间
语法:
Date()
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        document.write(Date());
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果

4、获取当前年、月、日

  • 在JavaScript中,使用getFullYear()、getMonth()和getDate()这3种方法来获取当前的年、月、日


    JavaScript获取当前年、月、日
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        var my_day=d.getDate();
        var my_month=d.getMonth()+1;
        var my_year=d.getFullYear();
        document.write("今天是"+my_year+"年"+my_month+"月"+my_day+"日");
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        var my_day=d.getDate();
        var my_month=d.getMonth()+1;
        var my_year=d.getFullYear();
        document.write("今天是"+my_year+"年"+my_month+"月"+my_day+"日");
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
  • 分析:

细心的同学发现,“var my_month=d.getMonth()+1;”这句代码使用了“+1”。其实,那是因为getMonth()方法返回值是0(一月)到11(十二月)之间的一个整数,所以必须加1月份才正确

  • 还要注意一下,获取当前的“日”,不是使用getDay(),而是使用getDate(),大家要看仔细啦!

5、设置当前年、月、日

  • 在JavaScript中,使用setFullYear()、setMonth()和setDate()方法来设置日期对象的年、月、日
  • 1、setFullYear()方法
    使用setFullYear()方法可以设置日期对象中的年份
语法:
日期对象.setFullYear(year,month,day)
  • 说明:
    参数year为必选项,表示年份的4位整数,用本地时间表示。
    参数month为可选项,表示月份的数值,介于0~11之间,用本地时间表示。
    参数day为可选项,表示月份中某一天的数值,介于1~31之间,用本地时间表示。

  • 2、setMonth()方法
    使用setMonth()方法可以设置日期对象中的月份。

语法:
日期对象.setMonth(month,day)
  • 说明:
    参数month为必选项,表示月份的数值,介于0~11之间,用本地时间表示。
    参数day为可选项,表示月份中某一天的数值,介于1~31之间,用本地时间表示

  • 3、setDate()方法
    使用setDate()方法可以设置日期对象中的日数。

语法:
日期对象.setDate(day)
  • 说明:
    参数day为必选项,表示月份中某一天的数值,介于1~31之间,用本地时间表示
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        d.setFullYear(1992,09,01);
        document.write("我设置的时间是:"+d);
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
  • 分析:
    在此得跟大家说一下,大家可要留意了,getFullYear()只能获取当前年份,但是setFullYear()却可以同时设置年、月、日;getMonth只能获取当前月份,但是setMonth()却可以同时设置月、日。大家得稍微思考并比较记忆一下

6、获取当前时、分、秒

  • 在JavaScript中,使用getHours()、getMinutes()、getSeconds()这3种方法分别用来获取当前的时、分、秒


    JavaScript获取当前时分秒
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        var my_hours=d.getHours();
        var my_minutes=d.getMinutes();
        var my_seconds=d.getSeconds();
        document.write("当前时间是:"+my_hours+":"+my_minutes+":"+my_seconds);
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
  • 获取的时分秒是根据当前系统时间的

7、设置当前时、分、秒

  • 在JavaScript中,使用setHours()、setMinutes()和setSeconds()方法来设置日期对象的时、分、秒
    1、setHours()方法
    在javascript中,使用setHours()方法可以设置日期对象中的小时
语法:
日期对象.setHours(hour,min,sec,millisec)
  • 说明:
    参数hour为必选项,表示小时的数值,是0~23之间的一个整数。
    参数min为可选项,表示分钟的数值,是0~59之间的一个整数。
    参数sec为可选项,表示秒数,是0~59之间的一个整数。不过在EMCAScript标准化之前,不支持该参数。
    参数millisec为可选项,表示毫秒数,是0~999之间的一个整数。不过在EMCAScript标准化之前,不支持该参数。

  • 2、setMinutes()方法
    在javascript中,使用setMinutes()方法可以设置日期对象中的分钟

语法:
日期对象.setMinutes(min,sec,millisec)
  • 说明:
    参数min为必选项,表示分钟的数值,是0~59之间的一个整数。
    参数sec为可选项,表示秒数,是0~59之间的一个整数。不过在EMCAScript标准化之前,不支持该参数。
    参数millisec为可选项,表示毫秒数,是0~999之间的一个整数。不过在EMCAScript标准化之前,不支持该参数

  • 3、setSeconds()方法
    在javascript中,使用setSeconds()方法可以设置日期对象的秒数

语法:
日期对象.setSeconds(sec,millisec)
  • 说明:
    参数sec为必选项,表示秒数,是0~59之间的一个整数。不过在EMCAScript标准化之前,不支持该参数。
    参数millisec为可选项,表示毫秒数,是0~999之间的一个整数。不过在EMCAScript标准化之前,不支持该参数
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        d.setHours(12,10,30);
        document.write("我设置的时间是:"+d);
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
  • 分析:
  • 在此得跟大家说一下,大家可要留意了,getHours()只能获取当前小时数,但是setHours()却可以同时设置时、分、秒、毫秒;getMinutes()只能获取当前分钟数,但是setMinutes()却可以同时设置分、秒、毫秒。大家得稍微思考并比较记忆一下。
  • 设置时间往往都是将setFullYear()和setHours()结合使用来设置完整时间。其实setFullYear()设置年、月、日,setHours()设置时、分、秒、毫秒

8、将日期时间转换为字符串

  • 在JavaScript中,将日期时间转换为字符串,共有3种方法:
    (1)toString()方法;
    (2)toUTCString()方法;
    (3)toLocaleString()方法;
  • 一、toString()方法
  • 在JavaScript中,使用toString()方法可以将日期对象Date转换为字符串,并返回结果
语法:
日期对象.toString()
  • 说明:使用toString()方法后,日期对象的字符串表示使用本地时间表示
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        document.write(d.toString());
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
  • 二、toUTCString()方法
  • 在JavaScript中,使用toUTCString()方法可根据世界时间(UTC)把Date对象转换为字符串,并返回结果
语法:
日期对象.toUTCString()
  • 说明:toUTCString()方法后,日期对象的字符串表示使用世界时间(UTC)表示
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        document.write(d.toUTCString());
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
  • 三、toLocaleString()方法
  • 在JavaScript中,使用toLocalString()方法可根据本地时间把Date对象转换为字符串,并返回结果
语法:
日期对象.toLocaleString()
  • 说明:使用toLocalString()方法后,日期对象的字符串表示使用本地时间格式来表示
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        document.write(d.toLocaleString());
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
  • 分析:toLocalString()方法是将日期时间用本地时间格式表示,因此大家在测试的时候有可能会跟上面预览效果有所出入

9、获取星期几

  • 在JavaScript中,使用getUTCDay()方法可以根据世界时间(UTC)返回表示星期几的一个数字
语法:
日期对象.getUTCDay()
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var d = new Date();
        var weekday = new Array(7);
        weekday[0] = "星期日";
        weekday[1] = "星期一";
        weekday[2] = "星期二";
        weekday[3] = "星期三";
        weekday[4] = "星期四";
        weekday[5] = "星期五";
        weekday[6] = "星期六";
        document.write("getUTCDay()获取数组下标是:"+d.getUTCDay()+"<br>");
        document.write("今天是:" + weekday[d.getUTCDay()]);
    </script>
</head>
<body>
</body>
</html>
在浏览器预览效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容