自己动手丰衣足食之日历

  1. 云栖社区>
  2. 博客>
  3. 正文

自己动手丰衣足食之日历

cometwo123 2016-03-27 17:50:00 浏览1051
展开阅读全文

这里写图片描述

<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
        body {
            font-family: 'Helvetica';
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
        }

        .m-date {
            width: 350px;
            height: 300px;
            background: #3EA7C2;
            margin: 80px auto;
            color: #fff;
        }

        #header {
            height: 45px;
            width: 100%;
            position: relative;
            border-bottom: 1px solid #fff;
        }

        #header .year-mon {
            text-align: center;
            line-height: 45px;
            font-size: 15px;
        }

        #header .btn {
            position: absolute;
            top: 0px;
            width: 45px;
            height: 45px;
            line-height: 45px;
            font-size: 24px;
            cursor: pointer;
            text-align: center;
        }

        #header .prevBtn {
            left: 0px;
        }

        #header .nextBtn {
            right: 0px;
        }

        .week {
            width: 350px;
            height: 35px;
        }

        .week li {
            float: left;
            width: 50px;
            height: 35px;
            text-align: center;
            font-size: 13px;
            font-weight: bold;
            line-height: 35px;
        }

        .number {
            margin-top: 5px;
        }

        .number li {
            float: left;
            width: 50px;
            font-size: 14px;
            height: 40px;
            color: #fff;
        }

        .number li span {
            display: block;
            width: 26px;
            height: 26px;
            margin: 7px 0 0 12px;
            line-height: 26px;
            text-align: center;
            border-radius: 50%;
        }

        .number li span.onToday {
            background: red;
        }
    </style>

    <body>
        <div class="m-date" id="m-date">
            <div id="header">
                <div class="prevBtn btn" id="prevBtn">&lt;</div>
                <div class="year-mon" id="year-mon"></div>
                <div class="nextBtn btn" id="nextBtn">&gt;</div>
            </div>
            <ul class="week" id="week">
                <li>Sun</li>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
            </ul>
            <ul class="number" id="number"></ul>
        </div>
        <script>
            var $ = function(id) {
                return "string" == typeof id ? document.getElementById(id) : id;
            }
            //通过new LeonDate, 获取id和参数,并执行初始化功能
            var Class = {
                create: function() {
                    return function() {
                        this.init.apply(this, arguments);
                    }
                }
            }
            Object.extend = function(destination, source) {
                for (var k in source) {
                    destination[k] = source[k];
                }
                return destination;
            }
            var LeonDate = Class.create();
            LeonDate.prototype = {
                /**
                 * 初始化插件
                 * @param  {string} container 日历容器id, 不需要带#号
                 * @param  {object} options   参数
                 */
                init: function(container, options) {
                    if (options.mont >= 13) {
                        alert("请输入正确月份1-12");
                        return;
                    }
                    this.Container = $(container);
                    this.option(options);
                    this.Year = this.options.year;
                    this.Mont = this.options.mont;
                    this._day = this.options._day;
                    this.week = this.options.week;
                    this.prevBtn = $(this.options.prevBtn);
                    this.nextBtn = $(this.options.nextBtn);
                    this.dateContainer = $(this.options.dateContainer);
                    this.draw();
                },
                option: function(options) {
                    var date = new Date();
                    //初始化选项设置
                    this.options = {
                        year: date.getFullYear(), //设置年
                        mont: date.getMonth() + 1, //设置月
                        _day: date.getDate(), //设置日
                        week: date.getDay(), //设置星期
                        prevBtn: "prevBtn", //上个月按钮id
                        nextBtn: "nextBtn", //下个月按钮id
                        dateContainer: "year-mon" //日期显示内容id
                    }
                    Object.extend(this.options, options);
                },
                draw: function() {
                    var arr = []; //保存天数数组句柄
                    //用当月第一天在一周中的日期值作为当月离第一天的天数 
                    for (var i = 1, firstDay = new Date(this.Year, this.Mont - 1, 1).getDay(); i <= firstDay; i++) {
                        arr.push("");
                    }
                    //用当月最后一天在一个月中的日期值作为当月的天数 
                    for (var i = 1, monthNum = new Date(this.Year, this.Mont, 0).getDate(); i <= monthNum; i++) {
                        arr.push(i);
                    }
                    var html = document.createDocumentFragment();
                    while (arr.length > 0) {
                        var li = document.createElement("li"),
                            sp = document.createElement("span"),
                            sh = arr.shift();
                        sp.innerHTML = ""; //先把span标签清空, 在赋值
                        sp.innerHTML = sh;
                        if (this.isSam(new Date(this.Year, this.Mont - 1, sh), new Date())) {
                            this.onToday(sp)
                        }
                        li.appendChild(sp);
                        html.appendChild(li);
                    }
                    if (this.Container.hasChildNodes()) {
                        this.Container.innerHTML = "";
                    }
                    this.Container.appendChild(html);
                    this.finish();
                },
                /*
                    选择上一个月的日期
                 */
                prevMon: function() {
                    var d = new Date(this.Year, this.Mont - 2, 1);
                    this.Year = d.getFullYear();
                    this.Mont = d.getMonth() + 1;
                    this.draw();
                },
                /*
                    选择下一个月的日期
                 */
                nextMon: function() {
                    var d = new Date(this.Year, this.Mont, 1);
                    this.Year = d.getFullYear();
                    this.Mont = d.getMonth() + 1;
                    this.draw();
                },
                onToday: function(o) { //获取今日
                    o.className = "onToday";
                },
                finish: function() {
                    var _self = this;
                    $(this.dateContainer).innerHTML = this.monthE(this.Mont) + "&nbsp;&nbsp;" + this.Year;
                    $(this.prevBtn).onclick = function() {
                        _self.prevMon();
                    }
                    $(this.nextBtn).onclick = function() {
                        _self.nextMon();
                    }
                },
                monthE: function(num) {
                    var en = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
                    return en[num - 1];
                },
                /** 
                 * isSam  判断是否同一天
                 * @param  {object}  new_y 数据里的时间
                 * @param  {object}  old_y 当前时间
                 * @return {Boolean}
                 */
                isSam: function(d1, d2) {
                    return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
                }
            }
            //用户new一个LeonDate实例, 第一个参数是日历容器的id, 第二个是配置参数, 可以不写
            new LeonDate("number", {
                prevBtn: "prevBtn", //上个月按钮id
                nextBtn: "nextBtn", //下个月按钮id
                dateContainer: "year-mon" //日期显示容器
            });
        </script>
    </body>

</html>
<!-- 
Jan.一月
Feb.二月
Mar.三月
Apr.四月
May五月
Jun.六月
Jul.七月
Aug.八月
Sep.九月
Oct.十月
Nov.十一月
Dec.十二月

星期一:  Mon.=Monday
星期二: Tues.=Tuesday
星期三: Wed.=Wednesday
星期四: Thur.=Thurday 
星期五: Fri.=Friday
星期六: Sat.=Saturday 
星期天: Sun.=Sunday
 -->

网友评论

登录后评论
0/500
评论
cometwo123
+ 关注