电子日历的设计与实现

功能要求： 设计一款简单的电子日历，要求实现显示当天所在月份的全部日期，并且可以通过点击按钮控件切换月份。
实现效果图：

一、界面设计
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

电子日历的设计与实现相关推荐

MSP430G2553 launchpad 口袋板口袋实验平台数字电子日历时钟设计秒表闹钟整点报时万年历电子时钟
题10 数字电子日历/时钟设计设计一个基于MSP430的电子日历和时钟. 基本要求 (1)可通过按键在日历和时间之间切换显示: (2)可由按键调整日期和时间 (3)可整点报时('铆.嘟"声 ...
JS项目—电子日历的设计与实现
第一章 JavaScript基础项目 1.2 电子日历的设计与实现功能实现:设计一款简单的电子日历,可以实现显示当天所在月份的全部日期,并且可以通过单击按钮控件切换月份的功能. 设计思路:主要分为三 ...
C51数字电子日历/时钟设计
题目要求: 数字电子日历/时钟设计设计一个基于MCS51的电子日历和时钟. 基本要求 (1) 可通过按键在日历和时间之间切换显示: (2) 可由按键调整日期和时间 (3) 可整点报时("嘟 ...
简单电子日历的设计与实现
简单电子日历的设计与实现 HTML代码 <!DOCTYPE html> <html> <head><title>简单电子日历的设计与实现</tit ...
简单的电子日历的设计与实现 web前端开发 css JavaScript HTML5
代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
可调式电子日历的设计
1.概述 1.1 课题背景单片机运用在各种智能设备当中,比如平衡车.扫地机器人等.设备智能化是一个必然的趋势,而要实现设备智能化离不开单片机的支持,所以学习单片机是每一位自动化学子的必修之路.之前虽 ...
HTML简单电子日历的设计与实现
** 效果图: ** 源码: 文字版: 简单电子日历
html+css+js设计电子日历
HTML: <!DOCTYPE html> <html><head><title>简单电子日历的设计与实现</title><meta ...
时钟晶振在电子日历上的作用！
电子日历在生活中日益普遍,该设计主要利用时钟芯片.表晶32.768KHZ,石英晶体谐振器.温度传感器DS18B20 和液晶屏LCD1602 构建了一个可测温式万年历装置,电路结构简单,具有语音报时功能 ...

电子日历的设计与实现

电子日历的设计与实现

电子日历的设计与实现相关推荐

最新文章

热门文章