电子日历的设计与实现
功能要求: 设计一款简单的电子日历,要求实现显示当天所在月份的全部日期,并且可以通过点击按钮控件切换月份。
实现效果图:
一、界面设计
1.使用<div>
标签划分区域
1)状态栏,左右两边是上/下个月按钮,中间是当前的年份和月份;
2)日历最上面一行的星期名称,从周日到周六依次填入;
3)用于显示当前月份的所有日期的区域。
2.制作状态栏
1)使用<button>
标签制作按钮;
2)继续使用<div>
标签制作年份和月份的显示牌。
3.制作显示星期的横栏
1)该区域分为7个小区域,分别显示周一至周日的名称。
二、显示状态栏中年份和月份
1.计算当前月份的总天数
1)自定义函数count()
2.计算当前月份的第一天是星期几
//获取本月第一天的日期对象
var firstdate = new Date(year, month - 1, 1);
//推算本月第一天是星期几
var xiqi = firstdate.getDay();
3.月份的全部日期
1)自定义函数showDate()
三、按钮控件功能实现
1.往前翻月份的效果实现(上个月)
1)自定义函数lastMonth()
2.往后翻月份的效果实现(下个月)
1)自定义函数nextMonth()
四、完整代码
<html>
<head>
<title>简单电子日历的设计与实现</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/calendar.css">
<script src="js/calendar.js"></script>
</head>
<body onload="showDate()">
<h3>简单电子日历的设计与实现</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>
<!--显示当前月份每天的日期-->
<div id="day"></div>
</div>
</body>
</html>
部分js代码
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 {
//如果是2月份需要判断当前是否为闰年
if (((year % 4) == 0 && (year % 100) != 0) || (year % 400) == 0) {
allday = 29;
//闰年的2月份是29天
} else {
allday = 28;
//非闰年的2月份是28天
}
}
}
function showMonth() {
var year_month = year + "年" + month + "月";
document.getElementById("month").innerHTML = year_month;
}
备注:完整版请下载附件
https://download.csdn.net/download/YQEMMMM/12973209