基于Css+JavaScript网页日历制作.docVIP

基于Css+JavaScript网页日历制作 　　摘要：随着因特网技术的发展，各式各样具有交互性能的网页应运而生。Css与JavaScript技术的结合使用可以设计出许多个性化动态网页效果。该文主要结合使用JavaScript在网页中制作日历控件的案例，分析了Date对象等JavaScript常用对象和对象方法、属性的用法，并给出了制作案例的具体代码。 关键词： javascript；日历；对象；方法；事件 中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2013）24-5567-04 网页在信息技术如此发达的今天，之所以会拥有如此多的忠实用户，而且其趋势也是日益增加的。究其原因，主要由于网页中包含了人们日常生活中所涉及的方方面面的内容，广泛而且适用，比如美食、服饰，比如新闻、财经等等，而日历，作为人们校准时间，制定行程的重要工具，更是在各大小网站中随处可见。当然，我们完全可以在网上下载到一个通用日历控件的源程序，稍加修改，使用到页面中去。但是，如此做，就失去了我们学习JavaScript的意义。 日历控件的制作，包括了CSS样式的使用以及JavaScript中函数和事件的调用，能让学生在动手制作日历的过程中掌握JavaScript内容的Date对象的用法，以及常用split等内置的属性和方法的使用，复习循环等程序设计结构，闰年的判定方法等，是一个非常好的教学案例。 1 基本理论 1.1 CSS简介 CSS（Cascading Style Sheets，层叠样式表单）是用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言，是有W3C提出的网页制作标准，现已获得绝大多数浏览器的支持，成为网页设计中必不可少的工具之一。 使用CSS还有如下的优势：可以使网页的表现非常统一，并且容易修改；可以支持多种设备；可以减少网页的代码量，加快下载显示的速度；作者和读者可以自己决定文件的显示；文件的结构更加灵活。 1.2 JavaScript简介 JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，它很容易嵌入到HTML文件之中，是事先在网页中编写好代码，然后此代码伴随HTML文件一起传送到客户端的浏览器上，由浏览器进行解释执行，无需服务器的帮忙。主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题。是Java与html之间、基于对象事件驱动的编程语言，因它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，而倍受Web设计者的所爱。 在JavaScript脚本语言编程中，函数是一个比较重要的概念。因为它为编程人员提供了一个方便的手段。在实际编程过程中，编程人员经常根据程序需要，将一个复杂的编程过程划分为一些相对独立的部分，每部分编写一个函数。使用函数可使各部分充分独立、任务单一，使程序清晰、易懂、易读、易维护。 在有些编程语言中，当将一个复杂的编程过程划分为一些相对独立的部分时，分别使用函数和过程来实现。其中，使用函数实现与数值计算相关的功能，而使用过程实现与数值计算无关的功能。在JavaScript脚本语言中.不区分函数和过程，都使用函数来实现。 1.3 DOM简介 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。网页中，有关JavaScript”的问题，95%其实是DOM的问题，我们用JavaScript对网页进行的所有操作都是通过DOM进行的。在本例中使用的Document接口是 DOM1核心（DOM1 Core）规范中定义的第一个接口，而document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西，如我们可以使用document.getElementsByTagName（”a”）获取a中的信息；alert（） 是一个DOM方法，弹出一个提示框，显示传递给该方法的参数（字符串）。 2 设计 该日历控件主要完成的功能是可以根据用户输入的日期显示相应的日历内容，并标记出当前日期。在用户点击某日期时，可以弹出该日期的年月日。 要完成该日历的制作，主要需要解决以下几个问题： 1）使用CSS设置美观的日历表格样式，使得日历的显示能够简洁而直观。 2）定义函数，准确地分析用户输入日期的当月天数、月