时间对象-JS基础

作者: 見贤思齊_ | 来源:发表于2020-11-30 15:51 被阅读0次

一、初见日期对象

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开始。

相关文章

  • 时间对象-JS基础

    一、初见日期对象 1.创建一个日期对象 var:用来声明一个变量。new:创建一个日期对象,必须使用new关键字。...

  • JS基础

    JS基础 JS运算 JS代码块 JS对象 原型对象 GC 正则表达式

  • 发现•分享—2019-01-17

    文章 JS JS 异步编程六种方案 JS基础—原型对象的那些事(一) JS基础—原型对象的那些事(二) CSS 综...

  • js时间对象基础知识

    1、Date() 2、Date.now() 3、Date.parse() 4、Date.UTC() 5、new D...

  • js对象及其方法

    1.对象MDN文档2.JS基础--JS对象及其基本用法3.JavaScript 对象所有API解析

  • html基础 持续更新

    html js 基础 js 常见获取dom对象的方法 getElementById() getElementByN...

  • Dom

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • DOM

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • JS对象基础

    对象是一个包含相关数据和方法的集合,通常由一些变量和函数组成,我们称之为对象里面的属性和方法 和在JS中创建变量一...

  • JS基础:对象

    万物皆对象~对象,是一个具体的事物。对象中会有属性和方法。是类的具体的一个实例。 字面量创建对象 遍历对象 for...

网友评论

    本文标题:时间对象-JS基础

    本文链接:https://www.haomeiwen.com/subject/jsorwktx.html