实现简单日历功能

最新推荐文章于 2019-08-01 16:01:18 发布
紫冰Nan
最新推荐文章于 2019-08-01 16:01:18 发布
阅读量1.9k
点赞数
分类专栏：功能实现文章标签：日历
本文链接：https://blog.csdn.net/NN_nan/article/details/56847409
版权
功能实现专栏收录该内容
13 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>日历</title>
    <script src="/static/jquery/jquery-1.11.1.min.js"></script>
    <link href="/static/materialize/css/materialize.min.css" rel="stylesheet">
    <script src="/static/materialize/js/materialize.min.js"></script>
    <style>
        /* 整体设置 */
        *{margin:0px;padding:0px;}

        /**
         * 设置日历的大小
         */
        .calendar{
            width: 80%;
            margin: auto;
            height: auto;
            /*width: 240px;*/
            /*height: 400px;*/
            display: block;
        }

        /**
         * 设置日历顶部盒子
         */
        .calendar .calendar-title-box{
            position: relative;
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align:center;
            /*border-bottom: 1px solid #ddd;*/
            color: #0F0F0F;
        }

        /**
         * 设置上个月的按钮图标
         */
        .calendar .prev-month {
            position: absolute;
            top: 12px;
            left: 0px;
            display: inline-block;
            width: 0px;
            height: 0px;
            border-left: 0px;
            border-top: 6px solid transparent;
            border-right: 8px solid #999;
            border-bottom: 6px solid transparent;
            cursor: pointer;
        }

        /**
         * 设置下个月的按钮图标
         */
        .calendar .next-month {
            position: absolute;
            top: 12px;
            right: 0px;
            display: inline-block;
            width: 0px;
            height: 0px;
            border-right: 0px;
            border-top: 6px solid transparent;
            border-left: 8px solid #999;
            border-bottom: 6px solid transparent;
            cursor: pointer;
        }


        /* 设置日历表格样式 */
        .calendar-table{
            width: 100%;
            border-collapse: collapse;
            text-align:center;
        }

        /* 表格行高 */
        .calendar-table tr{
            height: 30px;
            line-height: 10px;
        }

        /* 当前天 颜色特殊显示 */
        .currentDay {
            color: red;
        }

        /* 本月 文字颜色 */
        /*.currentMonth {
            color: #999;
        }*/

        /* 其他月颜色 */
        /*.otherMonth{
            color: #ede;
        }*/
        .calendar-body-box {
            line-height: 36px;
        }
        td,th{
            color: #0F0F0F;
            text-align: center;
        }
    </style>

</head>
<body>
    <nav class="yellow" style="height: auto;">
        <div class='calendar' id='calendar'></div>
    </nav>
<script>
    /*具体步骤：
    1.声明dateObj变量，并赋初值为当前系统时间
    2.给calendar div中渲染html元素
    3.通过dateObj获取当月1号的信息，并以此遍历出表格中所有日期
    4.给上一月、下一月图标绑定事件*/
    (function(){
        /*
         * 用于记录日期，显示的时候，根据dateObj中的日期的年月显示
         */
        var dateObj = (function(){
            var _date = new Date();    // 默认为当前系统时间
            return {
                getDate : function(){
                    return _date;
                },
                setDate : function(date) {
                    _date = date;
                }
            };
        })();

        // 设置calendar div中的html部分
        renderHtml(0);
        // 表格中显示日期
        showCalendarData();
        // 绑定事件
        bindEvent();
        //获取点击日期的信息
        clickdateinfo();

        /**
         * 渲染html结构
         */
        function renderHtml(tag) {
            var calendar = document.getElementById("calendar");
            calendar.innerHTML ="";
            var titleBox = document.createElement("div");  // 标题盒子 设置上一月 下一月 标题
            var bodyBox = document.createElement("div");  // 表格区 显示数据

            // 设置标题盒子中的html
            titleBox.className = 'calendar-title-box';
            titleBox.innerHTML = "<span class='prev-month' id='prevMonth'></span>" +
                "<span class='calendar-title' id='calendarTitle'></span>" +
                "<span id='nextMonth' class='next-month'></span>";
            calendar.appendChild(titleBox);    // 添加到calendar div中

            // 设置表格区的html结构
            bodyBox.className = 'calendar-body-box';
            var _headHtml = "<tr>" +
                "<th>日</th>" +
                "<th>一</th>" +
                "<th>二</th>" +
                "<th>三</th>" +
                "<th>四</th>" +
                "<th>五</th>" +
                "<th>六</th>" +
                "</tr>";
            var _bodyHtml = "";

            // 一个月最多31天，所以一个月最多占5行表格
            if(tag == 1){
                for(var i = 0; i < 5; i++) {
                        _bodyHtml += "<tr class='"+i+"'>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "</tr>";
                }
                bodyBox.innerHTML = "<table id='calendarTable' class='calendar-table'>" +
                    _headHtml + _bodyHtml +
                    "</table><span id='all'>收起</span>";
            }
            if(tag == 0){
                for(var i = 0; i < 5; i++) {
                    if(i>0){
                        _bodyHtml += "<tr class='"+i+"' style='display: none'>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "</tr>";
                    }else{
                        _bodyHtml += "<tr class='"+i+"'>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "</tr>";
                    }
                }
                bodyBox.innerHTML = "<table id='calendarTable' class='calendar-table'>" +
                    _headHtml + _bodyHtml +
                    "</table><span id='all'>展开</span>";
            }
            // 添加到calendar div中
            calendar.appendChild(bodyBox);
        }

        /**
         * 表格中显示数据，并设置类名
         */
        function showCalendarData() {
            var _year = dateObj.getDate().getFullYear();
            var _month = dateObj.getDate().getMonth() + 1;
            var _dateStr = getDateStr(dateObj.getDate());

            // 设置顶部标题栏中的 年、月信息
            var calendarTitle = document.getElementById("calendarTitle");
            var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "月";
            calendarTitle.innerText = titleStr;

            // 设置表格中的日期数据
            var _table = document.getElementById("calendarTable");
            var _tds = _table.getElementsByTagName("td");
            var _firstDay = new Date(_year, _month - 1, 1);  // 当前月第一天
            for(var i = 0; i < _tds.length; i++) {
                var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
                var _thisDayStr = getDateStr(_thisDay);
                _tds[i].innerText = _thisDay.getDate();
                //_tds[i].data = _thisDayStr;
                _tds[i].setAttribute('data', _thisDayStr);
                if(_thisDayStr == getDateStr(new Date())) {    // 当前天
                    _tds[i].className = 'currentDay';
                }else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
                    _tds[i].className = 'currentMonth';  // 当前月
                }else {    // 其他月
                    _tds[i].className = 'otherMonth';
                }
            }
        }

        /**
         * 绑定上个月下个月事件
         */
        function bindEvent() {
            var prevMonth = document.getElementById("prevMonth");
            var nextMonth = document.getElementById("nextMonth");
            addEvent(prevMonth, 'click', toPrevMonth);
            addEvent(nextMonth, 'click', toNextMonth);
            var p = document.getElementById("all");
            if(p.innerHTML == "展开"){
                addEvent(p,'click',function (e) {
                    renderHtml(1);
                    showCalendarData();
                    bindEvent();
                    clickdateinfo();
                })
            }
            if(p.innerHTML == "收起"){
                addEvent(p,'click',function (e) {
                    renderHtml(0);
                    showCalendarData();
                    bindEvent();
                    clickdateinfo();
                })
            }
        }

        /**
         * 绑定事件
         */
        function addEvent(dom, eType, func) {
            if(dom.addEventListener) {  // DOM 2.0
                dom.addEventListener(eType, function(e){
                    func(e);
                });
            } else if(dom.attachEvent){  // IE5+
                dom.attachEvent('on' + eType, function(e){
                    func(e);
                });
            } else {  // DOM 0
                dom['on' + eType] = function(e) {
                    func(e);
                }
            }
        }

        /**
         * 点击上个月图标触发
         */
        function toPrevMonth() {
            var date = dateObj.getDate();
            dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
            showCalendarData();
        }

        /**
         * 点击下个月图标触发
         */
        function toNextMonth() {
            var date = dateObj.getDate();
            dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
            showCalendarData();
        }

        /**
         * 日期转化为字符串， 4位年+2位月+2位日
         */
        function getDateStr(date) {
            var _year = date.getFullYear();
            var _month = date.getMonth() + 1;    // 月从0开始计数
            var _d = date.getDate();

            _month = (_month > 9) ? ("" + _month) : ("0" + _month);
            _d = (_d > 9) ? ("" + _d) : ("0" + _d);
            return _year + _month + _d;
        }

        /**
         * 点击获取所点击日期的信息
         */
        function clickdateinfo(){
            var table = document.getElementById("calendarTable");
            var tds = table.getElementsByTagName('td');
            for(var i = 0; i < tds.length; i++) {
                addEvent(tds[i], 'click', function(e){
                    console.log(e.target.getAttribute('data'));
                });
            }
        }


        var p = document.getElementById("all");
        addEvent(p,'click',function (e) {
            renderHtml(1);
            showCalendarData();
            bindEvent();
            clickdateinfo();
        })
    })();

</script>
</body>
</html>
参考http://www.jb51.net/article/88600.htm
紫冰Nan
关注
0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
实现简单日历功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>日历</title>
复制链接

扫一扫