尝试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 onclick="return yearChoice(-1);">上一年</a></div> <div onclick="return yearChoice(1);">下一年</a></div> </div> <div onclick="return monthChoice(-1);">上一月</a></div> <div onclick="return monthChoice(1);">下一月</a></div> </div> </div> <br/> <div id="dates"> <div name="code">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;}$(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"); }}