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

首先考虑下, 如何用DIV替代TABLE, 也就是手动绘制边框. 先搭配好HTML
效果图.
[img]
[img]http://dl.iteye.com/upload/attachment/0083/9534/8aed38d2-9e0a-3c3b-8418-d92a9fb1ec85.jpg[/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");
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值