时间对象-JS基础

一、初见日期对象

1.创建一个日期对象

var 日期对象名 = new Date();

var:用来声明一个变量。

new:创建一个日期对象,必须使用new关键字

Date():调用构造函数。

2.Date对象的方法

Date对象的方法很多,但主要分为两大类:

  • getXxx(): 用于获取时间。
  • setXxx(): 用于设置时间。

(1)获取时间

方法 说明
getFullYear() 获取年份,返回值为 4 位数字
getMonth() 获取月份,返回值为 0(一月)到11(十二月)之间的整数。(注意:正确的月份要 + 1)
getDate() 获取日数,返回值为 1~31之间的整数
getHours() 获取小时数,返回值为 0~23之间的整数
getMinutes() 获取分钟数,返回值为 0~59之间的整数
getSeconds() 获取秒数,返回值为 0~59之间的整数

(2)设置时间

方法 说明
setFullYear() 可设置 年、月、日
setMonth() 可设置 月、日
setDate() 可设置
setHours() 可设置 时、分、秒、毫秒
setMinutes() 可设置 分、秒、毫秒
setSeconds() 可设置 秒、毫秒

二、怎么做?

1.操作年、月、日

javascript中,我们可以使用getFullYear()、getMonth()、getDate()这3种方法分别获取当前时间的年、月、日

(1)获取年月日

① 语法格式

日期对象名.getFullYear()

日期对象名.getMonth()

日期对象名.getDate()

② 示例
Ⅰ.显示当前时间的年月日
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var date = new Date();                  // 创建日期对象
            var myYear = date.getFullYear();        // 获取当前时间的年
            var myMonth = date.getMonth() + 1;      // 获取当前时间的月
            var myDay = date.getDate();             // 获取当前时间的日
            
            document.write("今年是"+myYear+"年"+myMonth+"月"+myDay+"日"+"</br></br>"+"心儿归 日落西风又在吹"
                        +"</br>"+"思故乡 故有一场落花殇"+"</br>"+"雁南方 迎来一回十月霜");          
        </script>
    </head>
    <body>
    </body>
</html>
显示当前时间的年月日.png
Ⅱ.打招呼
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var date = new Date();  // 创建日期对象
            var hour = date.getHours();
            
            if(hour < 12){
                document.write("早安呦" + hour);       
            }
            else if(hour >= 12 && hour <= 18){
                document.write("午安呦" + hour);
            }
            else{
                document.write("晚安呦" + hour);
            }
        </script>
    </head>
    <body>
    </body>
</html>
打招呼.png

(2)设置年月日

我们可以使用setFullYear()、setMonth()、setDate()这3种方法分别设置当前日期对象的年、月、日

① setFullYear()

可以用来设置年、月、日。

Ⅰ.语法格式

日期对象名.setFullYear(year,month,day);

Ⅱ.说明
  • year:必选参数,用一个 4 位的整数标识,如:2020、2021等
  • month:可选参数,用0~11的整数表示。
  • day:可选参数,用1~31之间的整数来表示。
② setMonth()

可以用来设置月、日。

Ⅰ.语法格式

日期对象名.setMonth(month,day);

Ⅱ.说明
  • month:必选参数,用0~11的整数表示。
  • day:可选参数,用1~31之间的整数来表示。
③ setDate()

可以用来设置日。

Ⅰ.语法格式

日期对象名.setDate(day);

Ⅱ.说明
  • day:必选参数,用1~31之间的整数来表示。
④ 示例
Ⅰ.例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var date = new Date();          // 创建日期对象
            
            date.setFullYear(2020,4,20);    //月份会自动加1,变为5月  
            document.write("长长久久<br/><br/>"+date);      
        </script>
    </head>
    <body>
    </body>
</html>
设置年月日.png

(3)注意

getFullYear()只能获取年,但setFullYear()却可以同时设置年、月、日。同理,setMonth() 和 setDate()也这个特点。

2.操作时、分、秒

javascript中,我们可以使用getHours()、getMinutes()、getSeconds()这3种方法分别获取当前时间的时、分、秒

(1)获取时分秒

① 语法格式

时间对象名.getHours()

时间对象名.getMinutes()

时间对象名.getSeconds()

② 示例
Ⅰ.显示当前的时分秒
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var date = new Date();  // 创建日期对象
            var myHours = date.getHours();
            var myMinutes = date.getMinutes();
            var mySeconds = date.getSeconds();
            
            document.write("现在是"+myHours+"时"+myMinutes+"分"+mySeconds+"秒"+"</br></br>"+"心儿归 日落西风又在吹");           
        </script>
    </head>
    <body>
    </body>
</html>
显示当前的时分秒.png

(2)设置时分秒

我们可以使用setHours()、setMinutes()、setSeconds()这3种方法分别设置当前时间的时、分、秒、毫秒

① setHours()

可以用来设置时、分、秒、毫秒。

Ⅰ.语法格式

时间对象名.setHours(hour,min,sec,millsec);

Ⅱ.说明
  • hour:必选参数,表示时,取值为0~23之间的整数
  • min:可选参数,表示分,用0~59之间的整数表示。
  • sec:可选参数,表示秒,用0~59之间的整数表示。
  • millsec:可选参数,表示毫秒,用0~59之间的整数表示。
② setMinutes()

可以用来设置分、秒、毫秒。

Ⅰ.语法格式

时间对象名.setMinutes(min,sec,millsec);

Ⅱ.说明
  • min:必选参数,表示分,用0~59之间的整数表示。
  • sec:可选参数,表示秒,用0~59之间的整数表示。
  • millsec:可选参数,表示毫秒,用0~59之间的整数表示。
③ setSeconds()

可以用来设置秒、毫秒。

Ⅰ.语法格式

时间对象名.setSeconds(sec,millsec);

Ⅱ.说明
  • sec:必选参数,表示秒,用0~59之间的整数表示。
  • millsec:可选参数,表示毫秒,用0~59之间的整数表示。
④ 示例
Ⅰ.例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var date = new Date();  // 创建日期对象
            
            date.setHours(13,14,52);    
            document.write("今昔几何?<br/>"+date);      
        </script>
    </head>
    <body>
    </body>
</html>
设置时分秒.png

(3)注意

getHours()只能获取小时,setHours()却可以同时设置时、分、秒、毫秒。同理,setMinutes() 和 setSeconds()也这个特点。

3.获取星期几

javascript中,我们可以使用getDay()获取表示今天是星期几的一个数字

(1)语法格式

时间对象名.getDay();

① 说明

getDay()返回一个数字,其中0表示星期日(在国外,一周是从星期日开始的),1表示星期一,......

② 示例
Ⅰ.今天星期几?
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var date = new Date();  // 创建日期对象
            var weekday = date.getDay();

            document.write("今昔几何?<br/>"+ "星期" + weekday);       
        </script>
    </head>
    <body>
    </body>
</html>
getDay()今天星期几.png
Ⅱ.将返回的数字转换为中文

我们知道getDay()返回的是一个数字,若我们想要将数字转换为中文,该如何做呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var date = new Date();  // 创建日期对象
            var weekdays = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

            document.write("今昔几何?<br/>" + weekdays[date.getDay()]);     
        </script>
    </head>
    <body>
    </body>
</html>
getDay()返回汉字.png

先定义一个数组weekdays,用来存储中文的星期几。再借助getDay()方法返回的数字作为数组的的下标来获取。

注意:数组下标从0开始。

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

推荐阅读更多精彩内容

  • 一、Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计...
    子非鱼_t_阅读 4,179评论 1 44
  • 一、基础知识:1、JVM、JRE和JDK的区别:JVM(Java Virtual Machine):java虚拟机...
    杀小贼阅读 2,375评论 0 4
  • 0 介绍 0.1 ECMAScript ECMA-262 的第 5 版是 JS 的第一个稳定版本,得到了各浏览器厂...
    前端泥瓦匠阅读 407评论 0 0
  • mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3sh...
    Lnannan阅读 589评论 0 0
  • JavaScript 浏览器的内核 谷歌浏览器 Webkit内核(v8引擎)Blink火狐浏览器 Gecko内核欧...
    壞忎阅读 263评论 0 0