黑马程序员技术交流社区

标题: 关于javascript完成日历的问题 [打印本页]

---

作者: 而今从头越2012    时间: 2012-12-27 11:46
标题: 关于javascript完成日历的问题
下面是我写的一段js代码，想要做到只把当天日期显示为红色，但是当我选择下月的时候，却总是把同一天标记为红色，不知道怎么回事，希望各位给出意见：
var WEEK_STR = ["SUN","MON","TUE","WEH","THU","FRI","SAT"];
var currDate = new Date();
function $(id){
return document.getElementById(id);
}
function createEle(id,html,css,onclick){
var ce = document.createElement("div");
if(id){
  ce.id = id;
}
if(html){
  ce.innerHTML = html;
}
if(css){
  ce.className = css;
}
if(onclick){
  ce.onclick = new Function(onclick);
}
return ce;
}
function showCalendar(){
initCalendar();
freshCalHeader();
freshCalBody();
}
function initCalendar(){
var cal = $("calendar");
var calDiv = createEle("calendar");
if(!cal){
  var headCal = createEle("calendar_head");
  headCal.appendChild(createEle("calendar_pre","|<<","","gotoPreviousMonth()"));
  headCal.appendChild(createEle("calendar_month"));
  headCal.appendChild(createEle("calendar_next",">>|","","gotoNextMonth()"));
  calDiv.appendChild(headCal);
}

var week = createEle("calendar_week");
for(var i=0; i<7; i++){
  week.appendChild(createEle("",WEEK_STR[i]));
}
calDiv.appendChild(week);

var bodyCal = createEle("calendar_body");
var dayCal = createEle("calendar_day");
var footCal = createEle("calendar_foot");

var year = currDate.getFullYear();
var month = currDate.getMonth() + 1;
var day = currDate.getDate();
var ymd = year + "\u5e74" + month + "\u6708" + day + "\u65e5";
footCal.appendChild(createEle("calendar_get_today","Today: " + ymd));

bodyCal.appendChild(dayCal);
bodyCal.appendChild(footCal);

calDiv.appendChild(bodyCal);

document.body.appendChild(calDiv);
}
function freshCalHeader(){
$("calendar_month").innerHTML = currDate.getFullYear() + "\u5e74, " + (currDate.getMonth() + 1) + "\u6708";

}
function freshCalBody(){
clearCalBody();
freshPreviousMonth();
freshCurrentMonth();
freshNextMonth();
}
function clearCalBody(){
$("calendar_day").innerHTML = "";
}
function freshPreviousMonth(){
var firstDay = new Date(currDate.getFullYear(),currDate.getMonth(),1).getDay();
var lastDayOfPreviousMonth = new Date(currDate.getFullYear(),currDate.getMonth(),0).getDate();
  
  var cal_day = $("calendar_day");
  for(var i=lastDayOfPreviousMonth-firstDay+1; i<=lastDayOfPreviousMonth; i++){
   cal_day.appendChild(createEle("",i,"grey",""));
  }
  
}
function freshCurrentMonth(){
var cal_day = $("calendar_day");
var year = currDate.getFullYear();
var month = currDate.getMonth()+1;
var lastDay = new Date(year,month,0).getDate();
for(var i=1; i<=lastDay; i++){
  if(i == new Date().getDate()){
   cal_day.appendChild(createEle("",i,"red","gotoSelectedCurrDay(" + year + "," + month + "," + i + ")"));
  }else{
   cal_day.appendChild(createEle("",i,"","gotoSelectedCurrDay(" + year + "," + month + "," + i + ")"));
  }
}
}
function freshNextMonth(){
var cal_day = $("calendar_day");
var firstDay = new Date(currDate.getFullYear(),currDate.getMonth(),1).getDay()
var lastDay = new Date(currDate.getFullYear(),currDate.getMonth()+1,0).getDate();
for(var i=1; i<=42-firstDay-lastDay; i++){
  cal_day.appendChild(createEle("",i,"grey",""));
}
}
function gotoPreviousMonth(){
currDate = new Date(currDate.getFullYear(),currDate.getMonth()-1,1);
freshCalHeader();
freshCalBody();
}
function gotoNextMonth(){
currDate = new Date(currDate.getFullYear(),currDate.getMonth()+1,1);
freshCalHeader();
freshCalBody();
}
function gotoSelectedCurrDay(year,month,day){

}

下面是css代码：
#calendar{
width: 205px;
height: 200px;
border: 1px solid red;
position: absolute;
right: 100px;
}
#calendar_head{
width: 205px;
height: 30px;
position: relative;
background-color: #c4c2c4;
}
#calendar_pre{
position: absolute;
top: 3px;
left: 10px;
}
#calendar_next{
position: absolute;
top: 3px;
right: 10px;
}
#calendar_month{
position: relative;
line-height: 30px;
text-align: center;
font-weight: bold;
}
#calendar_week div{
width: 28px;
height: 15px;
line-height: 15px;
float: left;
text-align: center;
font-family: arial;
font-size: 13px;
color: #c6c6c6;
}
#calendar_body{
width: 203px;
height: 141px;
position: relative;
}
#calendar_day .grey{
color: #c6c6c6;
}
#calendar_day .red{
color: #ff0000;
font-weight: bold;
font-family: arial;
}
#calendar_day .selected{
color: #ff0000;
}
#calendar_day .today_selected{
color: #ff0000;
}
#calendar_day .today{
color: #ff0000;
}
#calendar_day div{
float: left;
width: 29px;
height: 20px;
}
#calendar_foot{
width: 205px;
height: 33px;
background-color: #c4c2c4;
}
#calendar_get_today{
position: relative;
top: 6px;
text-align: center;
font-weight: bold;
}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2