JavaScript 中的 Date 对象

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>


JavaScript 中的 Date 对象_第1张图片

你可能感兴趣的:(js,javascript)