尝试div+css代替table 制作日历 -

szeto

浏览: 2563 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-05 ( 1)
更多存档...

尝试div+css代替table 制作日历

首先考虑下, 如何用DIV替代TABLE, 也就是手动绘制边框. 先搭配好HTML
效果图.
[img]

[/img]

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DIV+CSS日历</title>
    <link charset="utf-8" rel="stylesheet" type="text/css" href="css/calendar.css">
    <script charset="utf-8" src="js/jquery2.js"></script>
    <script charset="utf-8" src="js/calendar.js"></script>
</head>
<body>
<br/>

<div id="calendar">
    <div id="opt">
        <div class="tr">
            <div id="year" class="td">2013</div>
            <div class="td ttl dark">年</div>
            <div class="td dark"><a href="#" onclick="return yearChoice(-1);">上一年</a></div>
            <div class="td td1 dark"><a href="#" onclick="return yearChoice(1);">下一年</a></div>
        </div>
        <div class="tr tr2">
            <div id="month" class="td">5</div>
            <div class="td ttl dark">月</div>
            <div class="td dark"><a href="#" onclick="return monthChoice(-1);">上一月</a></div>
            <div class="td td1 dark"><a href="#" onclick="return monthChoice(1);">下一月</a></div>
        </div>
    </div>
    <br/>

    <div id="dates">
        <div class="tr th">
            <div class="td dark">星期日</div>
            <div class="td dark">星期一</div>
            <div class="td dark">星期二</div>
            <div class="td dark">星期三</div>
            <div class="td dark">星期四</div>
            <div class="td dark">星期五</div>
            <div class="td td1 dark">星期六</div>
        </div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
            <div class="td td1">7</div>
        </div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
            <div class="td td1">7</div>
        </div>
        <div class="tr ">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
            <div class="td td1">7</div>
        </div>
        <div class="tr ">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
            <div class="td td1">7</div>
        </div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
            <div class="td td1">7</div>
        </div>
        <div class="tr2">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
            <div class="td td1">7</div>
        </div>
    </div>
</div>
</body>
</html>

然后CSS进行布局控制, 注意控制下规律即可;

body {
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
}

#opt {
    width: 275px;
    height: auto;
    margin: 0 auto
}
#dates {
    width: 568px;
    height: auto;
    margin: 0 auto
}

.td {
    float: left; /*向左浮动*/
    width: 80px;
    height: 20px; /* 与行高一直*/
    border-top: 1px solid blue;
    border-left: 1px solid blue;
    line-height: 20px; /*与行高一直, 垂直居中*/
}

.ttl {
    width: 20px;
}

.dark {
    color: white;
    background: #6666ff;
    border-color: #a52a2a !important;
}

a {
    color: white;
    text-decoration: none; /*超链接无下划线*/

}

.tr {
    clear: both;
    height: 20px
}

.tr2 .td {
    border-bottom: 1px solid blue; /*底边框*/
}

.td1 {
    border-right: 1px solid blue; /*右边框*/
}

.firstDay {
    background: #00ffff;
}

.notCurMonth {
    background: #f5f5dc;
}

JS进行事件处理;

$(function() {
    showDates();
})
function yearChoice(optYear) {
    var yText = parseInt($("#year").text()) + optYear;
    if (yText < 1) {
        return false;
    }
    $("#year").text(yText);
    showDates();
    return false;
}
function monthChoice(optMonth) {
    var mText = parseInt($("#month").text()) + optMonth;
    if (mText < 1 || mText > 12) {
        return false;
    }
    $("#month").text(mText);
    showDates();
    return false;
}

function showDates() {
    $("#dates div:not(.th) .firstDay ").removeClass("firstDay");
    $("#dates div:not(.th) .notCurMonth ").removeClass("notCurMonth");
    var year = parseInt($("#year").text());
    var month = parseInt($("#month").text());
    var myDate = new Date(year, month - 1, 1);
    console.log(myDate.toLocaleString());
    console.log(myDate.getDay());
    console.log(myDate.getDate());
    //判断是星期几
    var nowDay = myDate.getDay();
    /*获取当前月份1号所在的元素*/
    nowDay = nowDay == 0 ? 7 : nowDay;
    var dateArray = $("#dates div:not(.th) .td"); //表格

    //配置前一周的
    for (var i = 1; i <= nowDay; i++) {
        var tDate = new Date(year, month - 1, 1 - i); //当前月之前的一天
        $(dateArray[nowDay - i]).text(tDate.getDate());
        $(dateArray[nowDay - i]).addClass("notCurMonth");
    }
    //配置当前月份
    var lastDate = new Date(year, month, 0).getDate();
    var idx = nowDay;
    for (var i = 1; i <= lastDate; i++,idx++) {
        $(dateArray[idx]).text(i);
    }
    $(dateArray[nowDay]).addClass("firstDay");

    //填充后面的几天
    for (var len = dateArray.length,i = 1; idx < len; idx++) {
        $(dateArray[idx]).text(i++);
        $(dateArray[idx]).addClass("notCurMonth");
    }
}