尝试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");
}
}
好的,下面是一个简单的HTML+CSS+JS实现的日历,包含节假日的显示: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日历</title> <link rel="stylesheet" type="text/css" href="calendar.css"> </head> <body> <div class="calendar"> <div class="header"> <span class="prev" onclick="prevMonth()"><</span> <span class="date" id="date"></span> <span class="next" onclick="nextMonth()">></span> </div> <table> <thead> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> </div> <script src="calendar.js"></script> </body> </html> ``` CSS代码: ```css .calendar { width: 300px; margin: 20px auto; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; font-size: 14px; font-family: Arial, sans-serif; } .header { background-color: #f0f0f0; text-align: center; padding: 10px; position: relative; } .header span { cursor: pointer; } .prev { position: absolute; left: 10px; top: 10px; } .next { position: absolute; right: 10px; top: 10px; } .date { font-weight: bold; } table { width: 100%; border-collapse: collapse; } thead th { background-color: #f0f0f0; border: 1px solid #ccc; padding: 5px; text-align: center; } tbody td { border: 1px solid #ccc; padding: 5px; text-align: center; } .today { background-color: #c0c0c0; } .holiday { color: red; } ``` JS代码: ```js var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var tbody = document.getElementById("tbody"); var dateEle = document.getElementById("date"); // 获取当前月份的天数 function getDaysInMonth(year, month) { return new Date(year, month, 0).getDate(); } // 获取当前月份第一天是星期几 function getFirstDayOfWeek(year, month) { return new Date(year, month - 1, 1).getDay(); } // 获取当前月份的所有日期 function getDates(year, month) { var daysInMonth = getDaysInMonth(year, month); var firstDayOfWeek = getFirstDayOfWeek(year, month); var dates = []; for (var i = 1; i <= daysInMonth; i++) { dates.push(i); } for (var i = 0; i < firstDayOfWeek; i++) { dates.unshift(""); } return dates; } // 获取指定日期的节假日 function getHoliday(year, month, day) { var holidays = { "0101": "元旦", "0214": "情人节", "0308": "妇女节", "0312": "植树节", "0401": "愚人节", "0501": "劳动节", "0601": "儿童节", "0701": "建党节", "0801": "建军节", "0910": "教师节", "1001": "国庆节", "1224": "平安夜", "1225": "圣诞节" }; var monthStr = (month < 10 ? "0" : "") + month; var dayStr = (day < 10 ? "0" : "") + day; var dateStr = monthStr + dayStr; if (holidays[dateStr]) { return holidays[dateStr]; } return ""; } // 显示指定年月的日历 function showCalendar(year, month) { var dates = getDates(year, month); var html = ""; for (var i = 0; i < dates.length; i++) { if (i % 7 === 0) { html += "<tr>"; } var date = dates[i]; var holiday = getHoliday(year, month, date); if (holiday !== "") { html += '<td class="holiday">' + date + '<br>' + holiday + '</td>'; } else if (date !== "") { if (year === new Date().getFullYear() && month === new Date().getMonth() + 1 && date === new Date().getDate()) { html += '<td class="today">' + date + '</td>'; } else { html += "<td>" + date + "</td>"; } } else { html += "<td></td>"; } if (i % 7 === 6) { html += "</tr>"; } } tbody.innerHTML = html; dateEle.innerHTML = year + "年" + month + "月"; } // 上一个月 function prevMonth() { month--; if (month < 1) { month = 12; year--; } showCalendar(year, month); } // 下一个月 function nextMonth() { month++; if (month > 12) { month = 1; year++; } showCalendar(year, month); } // 显示当前月份的日历 showCalendar(year, month); ``` 这个日历会显示当前月份的日期,并标出当天和节假日。你可以根据自己的需要修改CSS样式和节假日数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值