第一章 JavaScript基础项目
1.2 电子日历的设计与实现
功能实现：设计一款简单的电子日历，可以实现显示当天所在月份的全部日期，并且可以通过单击按钮控件切换月份的功能。
设计思路：主要分为三部分，状态栏，包含两个按钮控件和显示当前年份与月份的区域，按钮控件分别可以单击翻到上个月和下个月，要求每次单击都能往前或往后翻一个月；中间部分，显示星期几；最后区域显示全部日期，并且当天的日期用红字标记出来。
注：大部分已经加了注释，不再进行详细解释，如有错误，欢迎大家批评指正，详细代码如下：
HTML部分
<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>电子日历的设计与实现</title><link rel="stylesheet" type='text/css' href="calendar.css"><script src="calendar.js"></script></head><body onload="showDate()"><h3 ><div class="t">简易电子日历</div></h3><hr/><div id="calendar"><!--状态栏--><div><button onclick="lastMonth()">上个月</button><div id="month"></div><button onclick="nextMonth()">下个月</button></div><!--显示星期几--><div> <div class="everyday"> </div><div class="everyday">日</div><div class="everyday">一</div><div class="everyday">二</div><div class="everyday">三</div><div class="everyday">四</div><div class="everyday">五</div><div class="everyday">六</div></div><!--显示当前月份每天的日期--><div id="day"></div></div></body></html>
CSS部分
div{/*为div设置统一样式*/text-align:center;margin-top:10px;margin-bottom:10px;}#calendar{width:400px;margin:auto;/*水平居中*/}button{width:25%;float:left;height:40px;}#month{width:50%;float:left;}.everyday{width:14%;float:left;}.t{text-align:center;}
JS部分
var today=new Date();//获取当前年月日var year=today.getFullYear();var month=today.getMonth()+1;var day=today.getDate();//当前月份的总天数var allday=0;//推算当前一个月一共有多少天function count() {if (month != 2) {if ((month == 4) || (month == 6) || (month == 9) || (month == 11)) {allday = 30;//4,6,9,11月份为30天}else {allday = 31;//其他月份除2月份为31天}}else {if (((year % 4) == 0 && (year % 100) != 0) || (year % 400) == 0) {allday = 29;//闰年的2月份为29天}else {allday = 28;}}}//显示日历标题中的当前年份和月份function showMonth(){var year_month=year+"年"+month+"月";document.getElementById("month").innerHTML=year_month;}//显示当前月份的日历function showDate(){showMonth();count();//获取本月第一天的日期对象var firstdate=new Date(year,month-1,1);//推算本月的第一天是星期几var xiqi=firstdate.getDay();//动态添加HTML元素var daterow=document.getElementById("day");daterow.innerHTML=" ";//如果本月的第一天不是星期日，前面需要空白元素补全日期if(xiqi!=0){for(var i=0;i<xiqi;i++){var dayElement=document.createElement("div");dayElement.className="everyday";daterow.appendChild(dayElement);}}//使用循环语句将当前月份的日期显示出来for(var j=1;j<=allday;j++){var dayElement =document.createElement("div");dayElement.className="everyday";dayElement.innerHTML=j+"";//如果日期为今天，则显示为红色if(j==day){dayElement.style.color="red";}daterow.appendChild(dayElement);}}//显示上个月的日历function lastMonth(){if(month>1){month-=1;}else{month=12;year-=1;}showDate();}//显示下个月的日历function nextMonth(){if(month<12){month+=1;}else{month=1;year+=1;}showDate();}
效果图
