1、 本科毕业设计 （ 20 届） 基于 JavaScript的万年历设计 所在学院 专业班级 通信工程 学生姓名 学号 指导教师 职称 完成日期 年 月 - 2 - 摘 要 随着个人计算机和网络的普及，人们已经把网络当做生活中必不可少的工具之一。人们想从网页中得到他们所需要的一切信 息，这样， web 网页万年历就应运而生。一般的万年历提供的仅是公历，对于还习惯了解农历日期过农历节日的中国人来说很不方便，本设计不仅可以让用户很方便的查询公历 1900 2050 年间任一月份，还可看不同时区时间，阳历、农历同步显示，并实现了多时区时间查询功能。 本设计是用 Javascript 语言编写的程序设计
2、， 完全用 Javascript 开发，纯文本文件的大小不过 30KB，代码中详细列有各种有关日期的函数，比 JavaScript 内置的日期函数功能强大得多，可以根据需要随时调用。代码完全手写，没有调用任何 JavaScript 内置的日期函数（除非调用当前时刻），重新编制各种日期时间函数，思路新颖，计算方法简洁。 本设计不仅实现了万年历的查询当日时间，还可以查看当月的其他日期，当年的其他日期的详细时间情况。并且还实现了可以查看农历、阴历、世界时间、节假日等等诸多功能，非常的人性化。用户操作界面美观，并且操作简单，基本上满足了人们对于万年历日常生活的要求。 关键词： 万年历； javascr
3、ipt； web - 3 - Abstract With the popularity of personal computers and networks, it has been essential to the network as one of the tools of life. People want to get from the web all the information they need, so, web page calendar came into being. General calendar only provides the Gregorian calenda
4、r, still used to understand the lunar date for the Lunar festival of the Chinese people is very easy, the design not only allows users to easily check calendar any month between 1900-2050, can not see Time zones and time, the solar calendar, the Lunar simultaneous display, and realized the long-time
5、 query. This design is written in Javascript programming language, developed entirely in Javascript, plain text files, but the size of 30KB, the code lists in detail all the relevant date of the function, built-in date than the JavaScript function is much more powerful, according to Need at any time
6、. Code completely by hand, do not call any JavaScript function built-in date (unless the call to the current time), re-establishment of various date and time functions, innovative ideas, computational method is simple. This design not only to achieve a query time of day calendar, the month can also
7、view the other day, when time and other details of the date of the situation. And also realize that you can view the lunar calendar, lunar calendar, world time, holidays and much more, very humane. Beautiful user interface and simple operation, basically to meet people for the calendar life requirem
8、ents Key Words： Calendar； Javascript ； Web - 4 - 目 录 1 概 述 . 1 1.1 课题研究背景及意义 . 1 1.2 研究开发和论文内容 . 1 1.2.1 开发工作主要内容 . 1 1.2.2 关于 Javascript. 2 1.2.3 Javascript 特点 . 2 1.2.4 论文内容 . 2 2 毕业设计的任务及要求 . 3 2.1 毕业 设计任务 . 3 2.2 主要内容与基本要求 . 3 3 需求功能 . 4 3.1 查看万年历 . 4 3.2 查询当月其他年份 . 4 3.3 查询当年其他月份 . 4 3.4 查询世界时间
9、 . 5 3.5 查看农历 . 5 4 界面设计 . 6 4.1 年月列表选择区 . 6 4.2 年月按钮选择区 . 7 4.3 世界时间区 . 7 4.4 结果显示区 . 8 4.5 完整界面 . 9 5 万年历的功能及其使用 .10 5.1 主要功能 .10 5.1.1 月历的产生 .10 5.1.2 日历的产生 . 11 5.2 万年历的使用 .12 6 结束语 .15 致 谢 . 错误 !未定义书签。 参考 文献 .16 附录 1 主要源程序代码 .17 - 1 - 1 概 述 1.1 课题研究背景及意义 现在所使用的万年历，实际上就是记录一定时间范围内（比如 100 年或更多）的具体
10、阳历或阴历的日期的年历，方便有需要的人查询使用 1。万年历已经成为我们日常生活中必不可少的时间工具。目前用万年历制作而成产品有很多，主要分为两大类：普通万年历和电子万年历。普通万年历像挂历台历之类的万年 历只能满足我们对时间日期的要求，虽然后来出现的电子万年历弥补了普通万年历的缺陷，可以查询农历阴历设置闹钟等功能，但是仍不能满足现代化社会人们对时间的要求。随着个人计算机和网络的普及，人们已经把网络当做生活中必不可少的工具之一。人们想从网页中得到他们所需要的一切信息，这样，网页万年历就应运而生。 网页万年历不仅满足了人们对万年历的查询当日时间，还可以查看当月的其他日期，当年的其他日期的详细时间情
11、况 2。并且还实现了可以查看农历、阴历、世界时间、节假日等等诸多功能，甚至还有了日志功能，我们可以在自己指定的日期 上写下自己当天要做的事，到了当天系统就会自动提醒我们，非常的人性化。用户操作界面美观，并且操作简单，基本上满足了人们对于万年历日常生活的要求。 1.2 研究开发和论文内容 1.2.1 开发工作主要内容 利用 Javascript 编写一个程序，能够在网页上显示万年历，当用户选择相应的日期能够显示对应的时间信息。比如：要查看 2011 年 11 月 11 日的信息，用户只要把时间切换到 2011 年 11 月，并把鼠标移到 11 号，就会在显示该日的时间信息。我们能从中得到的时间信
12、息包括农历、阴历、节假日、节气日、传统节日、公众节假日等 诸多信息。 - 2 - 1.2.2 关于 Javascript JavaScript 是一种新的描述语言，可以嵌入到 HTML 的文件之中（一种由Netscape 的 LiveScript 发展而来的脚本语言，它提高与 Java 的兼容性 3。JavaScript 采用 HTML 页作为其接口）。 Javascript 就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于 Internet 网页制作上。 1.2.3 Javascript 特点 JavaScript 是脚本编程语言：采用小程序段的方式实现编程，与 H
13、TML 代码结合 在一起，通常由浏览器解释执行 4。 JavaScript 是基于对象的语言： JavaScript 许多功能来自于脚本环境中对象的方法与脚本的相互作用在 JavaScript 中，既可以使用预定义对象，也可以使用自定义对象 5。 安全性：在 HTML 页面中的 JavaScript 不能访问本地硬盘，也不能对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互。 跨平台性：在 HTML 页面中 JS 的执行依赖于浏览器本身，与操作环境无关。只要在计算机上安装了 JavaScript 的浏览器，那么 JavaScript 程序就可以正确执行 6。 1.2.4 论文内容
14、 论文分六章。第一章概述，包括本课题的背景、意义和研究开发的主要内容；第二章介绍了毕业设计的任务及要求；第三章是基本功能，具体介绍了网页万年历的各种基本功能；第四章是界面设计，对主要界面设计作了解释，并给出了实现相应界面的主要程序段；第五章是万年历的功能及其使用，对所设计的万年历如何作用作了详细的介绍；第六章为结束语。 - 3 - 2 毕业设计的任务及要求 2.1 毕业设计任务 本课题主要是完成可以通过 web 浏览器查阅的万年历，要求基于Javascript 来 实现相应的功能。设计的万年历应有如下功能： 1）选择年月可以出现阴阳历 2）能显示出大部分节假日 3）能选择时区，显示不同时区的时
15、间 4）可以用顺序增加、减小年、月的方式进行查阅 5）对于所查的当日日期能用显眼的方式示出 2.2 主要内容与基本要求 该课题需要完成万年历算法的选择，万年历中包含可查阅的信息覆盖面广（如包括节假日、历史事件等内容），要设计出软件框图，流程图，完整的程序，最后调试通过可以实际使用，完成的 web 万年历查阅方便，人机交互界面友好。 - 4 - 3 需求功能 对于万年历系统，其主要功能是： 查看当日日期（年、月、日）、查看当时时间、查看其他年月的月历、对选中的日期进行标识。主要使用流程是：查看万年历系统，查看其他月份或年份日历，选中其他日期查看，查看当日日期。主要有以下几点功能。 3.1 查看万
16、年历 1） 进入万年历系统； 2） 系统获取当日日期并设置日历为当月，蓝框选中当日日期； 3.2 查询当月其他年份 改变年份有两种方法，一种是选择年份，一种是按键选择上一年或下一年。下拉菜单选择年份： 1） 点击选择年份的下拉菜单，选择年份； 2） 系统获取已选择的年份； 3） 系统设置为已选年份当月的月历并显示 在界面显示。 按键选择上一年（或下一年）： 1） 点击选择“年”（或“年”）的按键； 2） 系统获取选择框内的年份； 3） 将系统获取年份的数字减去 1（或加上 1）； 4） 将选择框内的年份设为已更改的年份； 5） 系统设置为已更改年份当月的月历并显示在界面显示。 3.3 查询当年
17、其他月份 改变月份有两种方法，一种是选择月份，一种是按键选择上一月或下一月。下拉菜单选择月份： - 5 - 1） 点击选择月份的下拉菜单，选择月份； 2） 系统获取已选择的月份； 3） 系统设置已选月份为当年的月历并在界面显示。 按键选择上一月（或下一月 ）： 1） 点击选择“月”（或“月”）的按键，； 2） 系统获取选择框内的月份； 3） 将系统获取月份的数字减去 1（或加上 1）； 4） 将选择框内的月份设为已更改的月份； 5） 系统设置为已更改月份当年的月历并在界面显示。 3.4 查询世界时间 1） 点击选择地区的下拉菜单，选择地区； 2） 系统获取已选择的地区的时间； 3） 系统设置为
18、已选地区时间并在下拉菜单下方显示。 3.5 查看农历 1） 选择查看的阴历日期并将鼠标放于上方不动； 2） 系统获取当日农历日期并以粉红色字体显示。 - 6 - 4 界面设计 该万年历设计界面 由方位布局构成，共分四块，如图 4-1所示，上部为年月列表选择区，右部为年月按钮选择区，中部为结果显示区，左部为世界时间区。 4.1 年月列表选择区 上方用两个下拉列表用于选择年份和月份， 如图 4-2 所示。如改变年份 我们用 的是Select 的 onchange 事件 ，当用户改变 select框中的内容时触发事件，也就是说 select 框中你选了另一个 年份 的时候 触发事件；同理可以改变月份。实现改变年，月的 Select 语句可用如下形式实现 7： +i) / 年 +i) / 月 图 4-2 年月下拉框 世界时间区 年月列表选择区 年月按钮选择区 结果显示区 图 4-1 万年历显示界面布局
