代码与注释如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的电子日历的设计与实现</title>
<style>
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;
}
</style>
</head>
<!-显示当前月份->
<body onLoad="showDate()">
<!-3级标题->
<h3 align="center">简单的电子日历的设计与实现</h3>
<!-下划线->
<hr/>
<!-id为calendar的div大框架->
<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>
<!-显示当前月份每天的日期->
<div id="day"></div>
</div>
<script language="javascript">
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;
//其他月份为31天,除去2月份
}
}
else{
//需要判断当前是否为闰年
if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
allday =29;
//闰年的月份为29天
}else{
allday=28;
//非闰年的月份为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();
//推算本月第一天是星期几
var daterow = document.getElementById("day");
daterow.innerHTML ="";
//动态添加HTML元素
//如果本月的第一天不是星期天,则前面需要用空白元素补完日期
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();
}
</script>
</body>
</html>