JS日期对象及案例

最新推荐文章于 2023-11-29 14:30:06 发布

Jyann~

最新推荐文章于 2023-11-29 14:30:06 发布

阅读量585

点赞数 1

分类专栏：前端 JS高级文章标签： Date日期获取日期计算方法

本文链接：https://blog.csdn.net/qq_34569497/article/details/96113733

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

JS高级

84 篇文章 3 订阅

订阅专栏

1.什么是日期对象？

一个和日期有关的对象，用来处理日期和时间。是由js已经提供给我们的，我们称为内置对象。内置对象有Array,Object,Date,String等等。

2.创建日期对象

var date = new Date();//Tue Jul 16 2019 10:24:06 GMT+0800 (中国标准时间) GMT+0800表示时区

创建一个跟日期有关系的对象。日期对象，必须通过new Date()进行调用，如果只是单纯执行Date()，得到的只是一个字符串。日期对象上有操作时间的方法，但是直接Date()返回的是字符串就没有操作时间的方法。
参数：创建日期对象的时候，我们传入参数，不同的参数有不同的效果。

参数：new Date(year,month[,day,hour,minutes,seconds,milliseconds]);

value：代表自1970年1月1日00:00:00 (世界标准时间) 起经过的毫秒数。可以为整数，也可以为负数，整数就从1970年1月1日00:00:00往后，为负数，就从1970年1月1日00:00:00往前

var date1 = new Date(1000);
console.log(date1);//Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间) 这里的08:00:01是由于时区问题

var date2 = new Date(-1000);
console.log(date2);//Thu Jan 01 1970 07:59:59 GMT+0800 (中国标准时间) value为负数时，时间就减去value代表的秒数

dateString：表示日期字符串。国内：yyyy-mm-dd

// var date = new Date("2019-08");//Thu Aug 01 2019 08:00:00 GMT+0800 (中国标准时间)
var date = new Date("2019-8");//Thu Aug 01 2019 00:00:00 GMT+0800 (中国标准时间)
console.log(date);

year：代表年份的整数值。为了避免2000年问题最好指定4位数的年份; 使用1998，而不要用 98。年和月是必填的
month：0 ~11 ，0代表1月，11 代表 12月，在获取月份的时候一定要注意，如果传入值不符合月份或年份时间标准自动往后进行计算。如果使用字符串创建了非法的时间，直接返回Invalid Date。

var date = new Date(2055,13);
console.log(date);//Tue Feb 01 2056 00:00:00 GMT+0800 (中国标准时间)

var date1 = new Date("2019-13");
console.log(date1);//Invalid Date

day ：代表一月中的某一天，从1开始。
hour （小时）：代表一天中的小时数，从0开始。
minute （分钟）：分钟数，从0开始
second （秒钟）：从0开始
millisecond（毫秒）：从0开始

注意事项

如果没有任何参数，会根据系统设置的当前时间来创建一个Date对象；
至少填两个参数（年和月），其余的参数均会默认为 1 或者 0；
通过函数直接调用返回的是String，通过new调用的是Object；
通过第三种方式设置的值（new Date(2055,13);//2056），一旦超出会进行自动计算

3.获取日期对象具体的方法

getFullYear() ：返回指定日期对象的年份
getMonth() ：返回指定日期对象的月份(0-11)
getDate() ：返回指定日期对象中的第几天
getDay() ：返回指定日期对象星期中的第几天
getHours() ：返回指定日期对象的小时数
getMinutes() ：返回指定日期对象的分钟数
getSeconds() ：返回指定日期对象的秒钟数
getMilliseconds()：返回指定日期对象的毫秒数，超过一千后会自动进行计算
getTime()：返回从1970年01月01日至该日期对象经过了多少毫秒数，值会有正负。Date.now()也可以获得毫秒数

注意点：

new Date()获取到的是本地计算机系统时间，可能会和标准时间有误差；
getDay()获取到的是星期几；
getDate()获取到的是某一天；
getMonth()获取的月份从0-11，真实计算需要+1；
获取时间戳的两种方法：getTime()和Date.now();

<script>
'use strict';
(function(){
    //获取的是本地计算机的系统时间
    var date = new Date();
    console.log(date);//Tue Jul 16 2019 10:24:06 GMT+0800 (中国标准时间)
    //获取年
    var year = date.getFullYear();
    console.log("年："+year);

    //获取月,月份从0开始，所以必须+1
    var mon = date.getMonth();
    console.log("月："+(mon+1));

    //获取日
    var day = date.getDate();
    console.log("日："+day);

    //获取时
    var hour = date.getHours();
    console.log("时："+hour);

    //获取分
    var min = date.getMinutes();
    console.log("分："+min);

    //获取秒
    var second = date.getSeconds();
    console.log("秒："+second);

    //获取星期
    var week = date.getDay();
    console.log("星期："+week);

    //获取时间戳now
    var time = date.getTime();
    console.log("时间戳getTime："+time);
    //获取时间戳now
    var now = Date.now();
    console.log("时间戳now："+now);
})();
</script>

结果：

4.设置日期对象具体时间的方法

设置方法中没有星期的设置，因为星期根据天数进行计算的

setFullYear()：为指定日期对象设置完整年份
setMonth()：为指定日期对象设置月份
setDate()：为指定日期对象设置天数
setHours()：为指定日期对象设置小时
setMinutes()：为指定日期对象设置分钟
setSeconds()：为指定日期对象设置秒数
setMilliseconds()：为指定日期对象设置毫秒
setTime() 等同于 new Date(value) 写法，所以不多做描述。通过毫秒数来设置日期对象时间，以1970年1月1日为时间起点

5.日期类型案例——超酷时钟

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超酷数码钟表 - 妙味课堂 - www.miaov.com</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="clock" class="date">
    <h2><img src="images/title.png" /></h2>
    <div class="year">
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img src="images/year.png" alt="year" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img src="images/month.png" alt="month" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img src="images/seven.png" alt="seven" longdesc="http://www.miaov.com" />
    </div>
    <div class="time">
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img src="images/sign.png" alt="sign" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img src="images/sign.png" alt="sign" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="pos2" src="images/week.png" alt="week" longdesc="http://www.miaov.com" />
        <img class="num2" src="images/one.png" alt="1" longdesc="http://www.miaov.com" />
    </div>
    <div class="url" title="妙味课堂-超酷时钟"><a href="http://www.miaov.com/"><img src="images/miaov.png" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></div>
</div>
<script>
(function(){
    //setInterval()刷新时，会等待间隔时间后再执行，如果需要一开始就执行，要手动再调用一次
    setClockTime();
    timer = setInterval(function(){
        setClockTime();
    },1000);

    //获取并设置时间
    //将年月日时分秒14位字符串获取，分别对应14张图片
    function setClockTime(){
        //获取的是本地计算机的系统时间
        var date = new Date();
        //获取年
        var year = date.getFullYear();

        //获取月,月份从0开始，所以必须+1
        var mon = fill0(date.getMonth()+1);
        //获取日
        var day = fill0(date.getDate());
        //获取时
        var hour = fill0(date.getHours());
        //获取分
        var min = fill0(date.getMinutes());
        //获取秒
        var second = fill0(date.getSeconds());
        //获取星期
        var week = date.getDay();

        //所有时间相加成14位字符串
        var dateStr = year + mon + day + hour + min + second;

        var weeks = ['images/seven.png','images/one.png','images/two.png','images/three.png','images/four.png','images/five.png','images/six.png'];
        var nums = ['images/0.png','images/1.png','images/2.png','images/3.png','images/4.png','images/5.png','images/6.png','images/7.png','images/8.png','images/9.png'];

        //获取所有num,并将dateStr和14个num对应上
        var img = document.querySelectorAll(".num");
        var weekImg = document.querySelector(".num2");
        for (var i = 0; i < img.length; i++) {
            img[i].src = nums[dateStr[i]];
        }
        weekImg.src = weeks[week];
    }

    //月日时分秒都有可能只有一位数，需要在前面补0
    function fill0(date){
        return date < 10 ? "0" + date : "" + date;
    }

})();
</script>
</body>
</html>

结果：

6.日期推算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>日期推算</h1>
    年：<input type="text">
    月：<input type="text">
    日：<input type="text">
    <br>
    时间间隔：<input type="text" value="100">
    <br>
    <button>计算</button>
    <hr>
    日期结果为：<span></span>
    <script>
        (function(){
            //获取当前系统日期，显示在页面上
            var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();

                //获取显示的年月日，将日期设置进去
                var input = document.querySelectorAll("input");
            init();
            function init(){
                input[0].value = year;
                input[1].value = month;
                input[2].value = day;
            }
            //点击计算后，获取修改后的时间，时间间隔进行计算
            var btn = document.querySelector("button");
            btn.onclick = function(){
                //获取表单的值
                var newYear = input[0].value;
                var newMonth = input[1].value;
                var newDay = input[2].value;
                //将时间间隔计算成毫秒设置到时间里
                var time = input[3].value * 1000 * 60 * 60 * 24;
                date.setFullYear(newYear);
                date.setMonth(newMonth-1);
                date.setDate(newDay);
                date.setMilliseconds(time);

                var span = document.querySelector("span");
                span.innerHTML = date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日";
            };

        })();
    </script>
</body>
</html>

结果：

Jyann~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS日期对象及案例

1.什么是日期对象？一个和日期有关的对象，用来处理日期和时间。是由js已经提供给我们的，我们称为内置对象。内置对象有Array,Object,Date,String等等。2.创建日期对象var date = new Date();//Tue Jul 16 2019 10:24:06 GMT+0800 (中国标准时间) GMT+0800表示时区创建一个跟日期有关系的对象。日期对象，...
复制链接

扫一扫