JS 日期对象知识总结

最新推荐文章于 2022-09-03 16:11:05 发布

潇潇雨歇~

最新推荐文章于 2022-09-03 16:11:05 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/lan128lan/article/details/103031229

版权

1. 基础起步：

var date = new Date()

date --> 返回年月日时间
date.getDate() --> 返回一月中的第几天(1-30)
date.getDay() --> 返回一周中的第几天(0-6)(西方周日代表0)
date.getMonth() --> 返回月份(0-11) (说明：像这种从0开始的，返回值加1才能对应正确月份)
date.getYear() --> 返回2位数年份，不用
date.getFullYear() --> 以4位数返回年份
date.getHours() --> 返回时(0-23)
date.getMinutes() --> 返回分(0-59)
date.getSeconds() --> 返回秒(0-999)
date.getTime() --> 返回1970/1/1至今的毫秒数(纪元时间1970/1/1)

PS:date.getTime()很常用，常被用来做时间戳，来检测一个程序的执行效率。

2. 进阶篇

（1）获取一个月的天数：

//new Date(year, month, 0) 获取某年某月的天数
//new Date(2019, 11, 0).getDate() //30
//new Date(2019, 10, 0).getDate() //31

function getEndDay(year, month) { //注意：month: 0-11 -> 1-12
    return new Date(year, month, 0).getDate();
}
getEndDay(2019, 11) //30

//这里的第三个参数"0"不能少，因为week是从0开始的：0-6

（2）计算某个月的第一天是周几

//new Date(year, month-1, 1).getDay()
//new Date(2019, 11-1, 1).getDay() //5

function getWeek(year, month) {
     return new Date(year, month-1, 1).getDay();
}
getWeek(2019, 11) //5(2019年11月的第一天是5号)

为什么是"month-1"？因为本月的第一天是上个月的下一天

拓展练习：制作日历

<!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>日历</title>
    <style less>
        *{
            margin: 0;
            padding: 0;
        }
        #date{
            width: 560px;
            margin: 30px auto;
        }
        li{
            list-style: none;
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
            font-weight: bold;
            font-size: 24px;
        }
        #date span{
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            font-size: 22px;
            float: left;
        }
        .active{
            background: #0078d7;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div id="date">
        <ul>
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <div></div>
    </div>
</body>
<script type="text/javascript">
    const div = document.querySelector('#date div');
    const d = new Date();

    //一个月的天数
    function getEndDay(year, month){
        return new Date(year, month, 0).getDate();
    }
    //这个月第一天是周几
    function getWeek(year, month){
        return new Date(year, month-1, 1).getDay();
    }

    //获取上个月的最后一天是几号
    let lastEndDay = getEndDay(d.getFullYear(), d.getMonth());

    //获取这个月的最后一天是几号
    let curEndDay = getEndDay(d.getFullYear(), d.getMonth()+1);

    //获取这个月的第一天是周几
    let week = getWeek(d.getFullYear(), d.getMonth()+1);
    week = week === 0?7:week;

    let curDay = 1;//每个月的日期从1开始
    let dayStr = ''; //存所有span标签
    let cmp = lastEndDay-week+1;
    console.log(cmp);


    for(let i=1;i<42;i++){
        if(i <= week){//这是上个月的日期
            dayStr += '<span>' + (cmp++) + '</span>';
        }else if(i > curEndDay + week){ //这是下个月的日期
            dayStr += '<span>' + (curDay++) + '</span>';
        }else{ //本月日期
            let cl = '';
            if(i-week === d.getDate()){
                 cl = 'active';
            }
            dayStr += '<span class="'+cl+'">' + (i-week) + '</span>';
        }
    }
    div.innerHTML = dayStr;
</script>
</html>