JS简易日历实现

最新推荐文章于 2024-04-06 09:56:33 发布

Alan_阿兰

最新推荐文章于 2024-04-06 09:56:33 发布

阅读量3.1w

点赞数 12

分类专栏： javascript开发

本文链接：https://blog.csdn.net/sixteen_cicle/article/details/78415420

版权

javascript开发专栏收录该内容

34 篇文章 2 订阅

订阅专栏

效果图
日历效果图
实现点

01.表格行数问题

首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列
getDay()方法了，该方法返回数组[0-6]中的一个数字，0代表星期天，1代表星期一，2代表星期二，以此类推。

并不是每个月都是31天，所以我们得创建一个包含12个月份的数组，每个元素代表每个月份所包含的天数。但是2月份比较特殊，闰年的2月份有29天，平年的2月份只有28天

firstday = new Date(y, m, 1), //获取当月的第一天

02打印日历表格

表格本身是一个二维数组，所以让for大师出来跑两个循环

html

<!DOCTYPE html>
<html>
<head>
    <title>js实现简易日历</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/calendar.css">

    <script src="js/lib.js"></script>
    <script src="js/main.js"></script>
    <script>
    window.onload = function(){

        renderHtml();
        showCalendarData();
        bindEvent();
    }
    </script>
</head>
<body>
<div class="calendar" id="calendar">
</div>

</body>
</html>

css部分

    @charset='utf-8';

    *{margin: 0;padding:0;}
    .calendar{
        margin: 10px auto;
        width: 240px;
        /*height: 400px;*/
        padding: 10px;
        border: 1px solid  #ddd;

    }
    .calendar .calendar-title-box{
        position: relative;
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-align: center;

        border-bottom: 1px solid  #ddd;

    }

    .calendar .prev-month {
         display: inline-block;
         cursor: pointer;
         width: 0px;height: 0px;
         border-left: 0px;
         border-top: 6px solid transparent;
         border-right: 8px solid #999;
         border-bottom: 6px solid transparent;

         position: absolute;
         top: 12px;
         left:0px;
    }
    .calendar .next-month {
         display: inline-block;
         cursor: pointer;
         width: 0px;height: 0px;
         /*border-left: 0px;*/
         border-right: 0;
         border-top: 6px solid transparent;
         /*border-right: 8px solid #999;*/
         border-left: 8px solid #999;
         border-bottom: 6px solid transparent;
         position: absolute;
         top: 12px;
         right: 0px
    }


    .calendar-body-box{

    }

    .calendar .calendar-table {
         border-collapse: collapse;
         text-align: center;
         width: 100%;

    }

    .calendar .calendar-table tr {
        height: 30px;
        line-height: 30px;
    }

    .calendar .cur-day{
        color: red;
    }
    .calendar .cur-mounth{
        color: #999;
    }
    .calendar .other-mounth{
        color:#ede;
    }

js部分


/*
    日历事件，可发挥
*/

function bindEvent(){
    var prevMonth = document.getElementById("prevMonth");

    var toPrevMonth = function(){
         var date = dateObj.getDate();
         dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
         showCalendarData();
    };
    addEvent(prevMonth, 'click', toPrevMonth);

    var toNextMonth = function(){
         var date = dateObj.getDate();
         dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
         showCalendarData();
    }


    var nextMonth = document.getElementById("nextMonth");
     addEvent(nextMonth, 'click', toNextMonth);    

}

// getElementById()
// getElementsByTagName()

function showCalendarData(){
    var odate = dateObj.getDate();
    var titlestr = getDateStr(odate,'title');

    console.log(titlestr);
    var calendarTitle = document.getElementById('calendarTitle');
        calendarTitle.innerText = titlestr;
    // con
    var calendarTable = document.getElementById('calendarTable');
    var tds = calendarTable.getElementsByTagName('td');

    var _firstDay = new Date(odate.getFullYear(), odate.getMonth(), 1);  // 当前月第一天


    for(var i = 0,len= tds.length; i<len;i++) {
        var _thisDay = new Date(odate.getFullYear(),
                             odate.getMonth(), 
                             i + 1 - _firstDay.getDay());
        var _thisDayStr = getDateStr(_thisDay,'YYYYMMDD');
        var item = tds[i];
        item.innerText = _thisDay.getDate();
        item.setAttribute('data', _thisDayStr);

        // 当前天
        if(_thisDayStr == getDateStr(odate,'YYYYMMDD')) { 
            item.className ='cur-day';
        }else if(_thisDayStr.substr(0, 6) 
            == getDateStr(_firstDay,'YYYYMMDD').substr(0, 6)) { 
            item.className ='cur-mounth';
        }else{
            item.className ='other-mounth';
        }



    }

    // console.log(_thisDayStr.substr(0,6));

}

// renderHtml()
function renderHtml(){
    var calendar = document.getElementById('calendar');
    var calendar_top = document.createElement('div');
    var calendar_con = document.createElement('div');

    calendar_top.className='calendar-title-box';
    calendar_top.innerHTML='<span class="prev-month" id="prevMonth"></span>'
    +'<span class="calendar-title" id="calendarTitle"></span>'
    +'<span class="next-month" id="nextMonth"></span>';

    // 表格区
    calendar_con.className='calendar-body-box';

    var _th ='<tr>'
        +'<th>日</th>'
        +'<th>一</th>'
        +'<th>二</th>'
        +'<th>三</th>'
        +'<th>四</th>'
        +'<th>五</th>'
        +'<th>六</th>'
        +'</tr>';

    var _tbody ='';
    for(var i=0;i<6;i++){
        _tbody+='<tr>'
        +'<td></td>'
        +'<td></td>'
        +'<td></td>'
        +'<td></td>'
        +'<td></td>'
        +'<td></td>'
        +'<td></td>'
        +'</tr>';

    };

    calendar_con.innerHTML='<table class="calendar-table" id="calendarTable">'
    +_th+_tbody+'</table>';
    calendar.appendChild(calendar_top);
    calendar.appendChild(calendar_con);

}

Alan_阿兰

关注

12
点赞
踩
48

收藏

觉得还不错? 一键收藏
3
评论
JS简易日历实现

效果图实现点 01.表格行数问题首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列 getDay()方法了，该方法返回数组[0-6]中的一个数字，0代表星期天，1代表星期一，2代表星期二，以此类推。并不是每个月都是31天，所以我们得创建一个包含12个月份的数组，每个元素代表每个月份所包含的天数。但是2月份比较特殊，闰年的2月份有29天
复制链接

扫一扫