JavaScript 中的 Date 对象

Date对象的创建

      var d = new Date();

通过new关键词来定义Date对象当使用上面方法直接创建Date对象时d存储的是当前时间的时间信息（文档编写时间2020/03/08 10：29）
在这里插入图片描述

       var d = new Date("October 9, 1999 11:00:00");

在这里插入图片描述

 var d = new Date(1999,5,24);

未被输入的信息默认为0
在这里插入图片描述
*Date 对象方法
*常用的Date方法主要有两种
setXXX()（设置某项时间数据）

        var d = new Date();
        d.setFullYear(3020);

在这里插入图片描述
设置年份

        var d = new Date();
        d.setHours(20);

在这里插入图片描述
设置小时
setXXX()的方法

方法	描述
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的小时 (0 ~ 23)。
setHours()	设置 Date 对象中月的某一天 (1 ~ 31)。
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 对象中月的某一天 (1 ~ 31)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。

setXXX()（设置某项时间数据）
与setXXX()用法相似，用来获取Date对象中的特定信息

        var d = new Date();
        var a = d.getFullYear();

在这里插入图片描述
getXXX()的方法

方法	描述
getDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
getFullYear()	设置 Date 对象中的小时 (0 ~ 23)。
getHours()	设置 Date 对象中月的某一天 (1 ~ 31)。
getMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
getMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
getMonth()	设置 Date 对象中月份 (0 ~ 11)。
getSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
getTime()	getTime() 方法以毫秒设置 Date 对象。
getUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
getUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
getUTCHours()	设置 Date 对象中月的某一天 (1 ~ 31)。
getUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
getUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
getUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
getUTCSeconds()	getUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。

其他的Date()对象方法

方法	描述
toDateString()	把 Date 对象的日期部分转换为字符串。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

常见的Date()应用
获取并格式化输出时间信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function date_s(){
            var a = new Date();
            var y = a.getFullYear();
            var m = a.getMonth() + 1;
            var r = a.getDate();
            var h = a.getHours();
            var mi = a.getMinutes();
            var s = a.getSeconds();
            console.log(y+ "-" + m + "-" + r ,h + "-" + mi + "-" + s);
        }
        date_s();
    </script>
</body>
</html>

注意：在Date中如果直接getMonth()所获取到的数值要比真实月份小1 这是因为其中的月份返回值范围为0~11 也就是说需要将返回值+1得到的才是我们想要的真实月份。

通过计算获得两个日期之间的时间差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = new Date(2020,8,3,8,25,30);
        var b = new Date(2020,8,4,9,30,30);
        var c = Math.abs(a.getTime() - b.getTime()) + 1000;
        var c_d = c / 1000 / 3600 / 24;
        var c_h = c_d % 1 * 24;
        var c_m = c_h % 1 * 60;
        var c_s = c_m % 1 * 60 ;
        console.log(c_d , c_h , c_m);
        console.log("相差" + parseInt(c_d) + "天" + parseInt(c_h) + "小时" + parseInt(c_m) + "分钟" + parseInt(c_s) + "秒");
    </script>
</body>
</html>

购物网站内常见的贩售倒计时效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 250px;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div class="box">
        <p id="dc"></p>
        <p>点到场</p>
        <p id="sj">

        </p>
    </div>
    <script>
        var kc = new Date(2020,2,9,8,25,30);
        var ne = new Date();
        var dc = document.getElementById("dc");
        var sj = document.getElementById("sj");
        dc.innerHTML = kc.getMonth()+1 + "月" + kc.getDate() + "日" + kc.getHours() + ":" + kc.getMinutes();
        var c = Math.abs(kc.getTime() - ne.getTime()) + 1000;
        var c_h = c / 1000 / 3600;
        var c_m = c_h % 1 * 60;
        var c_s = c_m % 1 * 60 ;
        var c_h = parseInt(c_h) ;
        var c_m = parseInt(c_m);
        var c_s = parseInt(c_s) ;
        setInterval(function () {
            if (c_s === 0) {
                if (c_m === 0) {
                    if (c_h === 0) {
                        tz();
                    } else {
                        c_h--;
                        c_m = 59;
                        c_s = 59;
                    }
                } else {
                    c_m--;
                    c_s = 59;
                }
            }else{
                c_s--;
            }
            sj.innerHTML = c_h + ":" + c_m + ":" + c_s;
        }, 1000);
        sj.innerHTML = c_h + ":" + c_m + ":" + c_s;
        console.log(kc);

    </script>
</body>

</html>

在这里插入图片描述

辉闪

发布了3 篇原创文章 · 获赞 8 · 访问量 63

私信关注

JavaScript 中的 Date 对象

JavaScript 中的 Date 对象

猜你喜欢