写了一个简单的日历

72 阅读1分钟

公司的一个日历控件有问题,让我看哪有问题,看起来真复杂,我就先写了一个日历,看实现原理是什么 也不怎么会表达,一行一行的coding完了,就这样了 预览地址output.jsbin.com/qayisezula 核心代码

drawDate: function (opt) {
    var nowdata = new Date().getDate();
    var nowmonth = new Date().getMonth();
    var nowyear = new Date().getFullYear();
    var month = this._month;
    var year = this._year;
    var val = this._year + '/' + (this._month+1) + '/' + nowdata;
    var oid = document.getElementById(this.id);
    oid.value = val;
    var showmonth = month + 1;
    //当前月有多少天
    var numdays = this.mdays(year)[month];
    var first_date = new Date(year, month, 1);
    //获取当月第一天是星期几
    var first_day = first_date.getDay();
    //第一天是星期几加上总天数,一个星期共有7天,除以7,就是行数,只能多不能少,所以用Math.ceil向上取整数
    var str_num = Math.ceil((first_day + numdays) / 7);//得到表格有多少行

    var str_table = '<tr><td><a href="javascript:void(0);" id="pre"><</a></td><td colspan="3">' + year + '年</td><td colspan="2">' + showmonth + '月</td><td><a href="javascript:void(0);" id="next">></a></td></tr><tr><td >日</td><td >一</td><td >二</td><td >三</td><td >四</td><td >五</td><td >六</td></tr>';
    var table = document.createElement('table');
    table.innerHTML = str_table;
    for (var i = 0; i < str_num; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < 7; j++) {
            var td = document.createElement('td');
            var idx = i * 7 + j;
            date_num = idx - first_day + 1;
            td.innerHTML = date_num;
            if (date_num < 1 || date_num > numdays) {
                td.innerHTML = '';
            }
            if (date_num == nowdata && nowyear == year && month == nowmonth) {
                td.className = 'now'
            }
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    table.id = 'lytable';
    // console.log(table.innerHTML);
    document.body.appendChild(table);
    this.getpos();
    this.listen();

}

全都代码在这 github.com/ralcen/jque…

感谢

用JS编写日历的简单思路 JS制作简单的日历控件【JS Date对象操作实例演示】