JavaScript jQuery课程设计剖析

合集下载

JAVASCRIPT+JQUERY开发框架课程设计

添加标题
添加标题
添加标题
添加标题
项目经验：掌握了JAVASCRIPT和 JQUERY的基本语法和用法，了解了开发框架的设计思想和实现方法
个人能力水平的提高：通过课程设计，提高了编程能力、问题解决能力和团队协作能力，为以后的学习和工作打下了坚实的基础
完成度：项目是否按照预定计划完成，是否达到预期目
掌握jQuery的插件机制，如插件的使用、开发等
掌握JavaScript和jQuery的跨浏览器兼容性问题及解决方案
掌握JavaScript和jQuery在实际项目中的应用，如前端开发、后端开发等
理解JavaScript的基本语法和编程思想掌握JavaScript的常用API和框架理解jQuery的基本原理和用法
优化和改进：根据测试结果进行优化和改进，提高代码质量和性能
编写测试用例：根据需求文档编写测试用例，确保覆盖所有功能点执行测试用例：使用自动化测试工具执行测试用例，观察测试结果调试代码：根据测试结果定位问题，使用调试工具进行代码调试修复问题：根据调试结果修复代码问题，确保功能正常重复测试和调试：直到所有测试用例通过，确保功能稳定可靠
演示项目：项目名称、功能介绍、技术实
现
讲解项目：项目背景、需求分析、设计思路、实现过程
展示技能： JavaScript、 jQuery、HTML、 CSS等技能应用
互动环节：提问、答疑、讨论，加深理解
课程设计成果：完成了一个基于 JAVASCRIPT+JQUERY的开发框架
项目教训：在开发过程中遇到了一些困难和问题，如代码编写错误、性能优化等问题，通过解决这些问题，提高了解决问题的能力和经验

JavaScript+jQuery前端开发基础教程教案

JavaScript+jQuery前端开发基础教程教案第一章：JavaScript概述1.1 课程介绍本章节将介绍JavaScript的发展历程、特点以及应用场景。

使学生了解JavaScript的历史背景和基本概念，为后续学习打下基础。

1.2 教学目标了解JavaScript的历史和发展掌握JavaScript的基本特点掌握JavaScript的应用场景1.3 教学内容1.3.1 JavaScript的历史和发展1.3.2 JavaScript的基本特点1.3.3 JavaScript的应用场景1.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。

1.5 课后作业简述JavaScript的历史和发展。

列举出JavaScript的三个基本特点。

说出JavaScript的应用场景。

第二章：HTML与CSS基础2.1 课程介绍本章节将介绍HTML和CSS的基本概念，以及如何使用它们来创建网页。

学生将学会如何编写HTML代码和应用CSS样式。

2.2 教学目标掌握HTML的基本结构了解CSS的作用和基本语法学会使用CSS样式化网页2.3 教学内容2.3.1 HTML基本结构2.3.2 CSS的基本语法和作用2.3.3 使用CSS样式化网页2.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。

2.5 课后作业编写一个简单的HTML页面，包括、段落和图片。

尝试使用CSS样式化你的HTML页面，使其看起来更美观。

第三章：JavaScript基本语法和操作3.1 课程介绍本章节将介绍JavaScript的基本语法和基本操作，如变量、数据类型、运算符、控制语句等。

学生将学会如何编写简单的JavaScript代码。

3.2 教学目标掌握JavaScript的基本语法学会使用JavaScript进行基本操作3.3 教学内容3.3.1 JavaScript的基本语法3.3.2 变量和数据类型3.3.3 运算符和控制语句3.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。

js课程设计思路

js课程设计思路一、教学目标本课程的教学目标是让学生掌握JavaScript的基础知识，包括变量、数据类型、运算符、控制结构等，培养学生编写简单的JavaScript程序的能力。

同时，通过学习JavaScript的面向对象编程，使学生了解对象、类、继承等概念，并能够运用面向对象的思想解决实际问题。

此外，课程还将培养学生的团队合作意识和问题解决能力，通过完成小组项目和解决实际问题，使学生能够将所学知识应用于实践，提高自身的综合素质。

二、教学内容本课程的教学内容主要包括JavaScript的基础语法、变量、数据类型、运算符、控制结构等知识，以及面向对象编程的基本概念和方法。

具体包括以下几个部分：1.JavaScript基础语法和基本概念2.变量和数据类型3.运算符和表达式4.控制结构（条件语句、循环语句）5.函数和事件处理6.面向对象编程（对象、类、继承）7.团队合作项目和实际问题解决三、教学方法本课程将采用讲授法、讨论法、案例分析法和实验法等多种教学方法，以激发学生的学习兴趣和主动性。

具体方法如下：1.讲授法：教师讲解JavaScript的基本概念、语法和编程方法，为学生提供系统的知识结构。

2.讨论法：教师引导学生就某个问题进行讨论，培养学生的思考能力和团队合作意识。

3.案例分析法：教师通过分析典型案例，使学生了解JavaScript在实际应用中的原理和技巧。

4.实验法：学生动手编写JavaScript程序，进行实验操作，培养学生的实际编程能力和问题解决能力。

四、教学资源本课程的教学资源包括教材、参考书、多媒体资料和实验设备等。

具体资源如下：1.教材：选用权威、实用的JavaScript教材，为学生提供系统的学习材料。

2.参考书：提供相关的JavaScript参考书籍，丰富学生的知识视野。

3.多媒体资料：制作课件、教学视频等多媒体资料，增强课堂教学的趣味性和生动性。

4.实验设备：提供计算机、网络等实验设备，保障学生能够进行实际编程操作。

jqurey课程设计

jqurey课程设计一、课程目标知识目标：1. 让学生掌握jQuery的基本概念、语法及功能特点，理解其与原生JavaScript的关系。

2. 学会使用jQuery选择器、事件处理、DOM操作等核心功能，能灵活运用解决实际问题。

3. 了解jQuery插件的使用和开发，掌握常见插件的安装和配置。

技能目标：1. 培养学生运用jQuery编写网页动态效果的能力，提高网页开发效率。

2. 培养学生具备独立分析和解决实际问题的能力，能结合具体需求使用jQuery进行编程。

3. 提高学生的团队协作能力，学会在项目中合理分工、协同开发。

情感态度价值观目标：1. 培养学生积极的学习态度，激发对前端开发的兴趣和热情。

2. 培养学生勇于尝试、不断探索的精神，提高面对困难的勇气和毅力。

3. 强调诚信、合作、尊重他人的重要性，培养良好的职业道德和团队精神。

课程性质：本课程为信息技术课程，旨在让学生掌握jQuery这一前端开发工具，提高网页开发效率。

学生特点：学生具备一定的HTML、CSS和JavaScript基础，对前端开发有一定了解，具备基本的编程能力。

教学要求：通过讲解、实践、讨论等多种教学方式，使学生在掌握jQuery基础知识的基础上，能独立完成实际项目开发，提高学生的实际操作能力和团队协作能力。

将课程目标分解为具体的学习成果，以便进行后续的教学设计和评估。

二、教学内容1. jQuery概述- 理解jQuery的作用和优势- 掌握jQuery的引入方法2. jQuery选择器- 学习基本选择器、层次选择器、过滤选择器等- 实践使用选择器进行DOM元素操作3. jQuery事件处理- 掌握常见事件类型及使用方法- 学会使用事件绑定和解除绑定4. DOM操作- 学习DOM遍历、查找、创建、删除等操作- 掌握属性操作、样式操作、内容操作等方法5. jQuery动画与特效- 学习基本动画、滑动、淡入淡出等效果- 实践使用动画制作网页动态效果6. jQuery插件- 了解常见jQuery插件的使用和配置- 学习开发简单的jQuery插件7. 项目实践- 结合所学知识，进行团队项目开发- 针对具体需求，选择合适的jQuery功能进行实现教学内容依据课程目标，紧密围绕jQuery的核心功能，按照由浅入深的顺序组织。

《网页脚本技术(JavaScript+jQuery)》课程标准

课程名称：网页脚本技术(JavaScript+jQuery)学分：4计划学时：64适用专业：计算机应用技术1．前言1.1课程性质该课程是计算机应用技术专业用户界面设计方向的一门专业拓展课，是在网站前端设计、移动Web开发(Html5+CSS3)等专业课的基础上开设的，与网站项目管理、网站后台开发()等后续课程也有着紧密联系。

本课程遵循“以就业为导向，以学生为主体，以培养职业技能为中心”的原则进行课程设计与教学。

从实际应用的角度来理解JavaScript语言的语法和jQuery 库的应用，引导学生在完成各个网页特效设计任务的过程中，熟练掌握形式多样的网页特效的设计方法，培养学生网页特效分析和设计能力。

1.2设计思路本课程对就业方向所涵盖的岗位进行任务与职业能力分析，以实际工作任务为引领，以创新能力培养为主线，将课程知识体系整合为十个技能教学模块，在教学过程中注意体现学生设计能力培养的循序渐进性。

在教学内容和方法上贯彻“技能培养为主，知识够用为度”的教学思想，旨在培养学生的创新意识，提高岗位实践能力和适应能力。

在每个教学单元中设置了3条主线：教学流程主线、理论知识主线和操作任务主线。

充分考虑教学的要求，每个教学单元面向教学全过程设置了完整的教学环节，按照“教学导航->特效赏析->知识必备->引导训练->同步训练->考核评价”6个环节组织教学。

2．课程目标2.1总体目标通过本课程的学习使学生掌握JavaScript的基本语法概念和使用JavaScript 进行页面效果开发的基本思想；能熟练地用JavaScript语言进行浏览器端的脚本开发；能熟练使用jQuery进行Web页面处理。

培养学生规范编码和良好的程序设计风格；培养学生面向对象编程的思维和提高逻辑思维能力；培养学生发现问题、分析问题、解决问题的能力；培养良好的职业素质；培养团队协作和和谐的沟通能力；并为学生以后从事更专业化的软件开发工作或者学习后续课程打下良好的基础。

jquery课程设计报告

课程设计报告课程设计名称： jquery课程设计系部名称：中印计算机软件学院学生姓名：李壮壮班级： 13级计算机应用技术三班学号： 201301070081成绩：指导教师：范伟村开课时间：2015-2016学年第1学期一、什么是JQUERYjQuery是一个轻量级的跨浏览器的JavaScript库, 该库的重点在于JavaScript和HTML之间的互动. 它是2006年一月, 在BarCamp NYC由John Resig发布的. 目前10,000个最大网站的百分之二十都在使用它, jQuery是当今世界最为流行的JavaScript库.jquery是继prototype之后又一个优秀的javascript库。

它是轻量级的js库，它兼容Css3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery 能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html 里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。

jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

网页设计与制作——JavaScript+jQuery标准教程教案第2章 JavaScript基础

电子商务网页设计与制作
授课教案
学年第学期
课前：
【教师布置调研任务】
调研主题：《了解JavaScrip的语法规则》
要求：以小组为单位，通过网络查找的方式了解JaVaSeriP的语法规则。

制作汇报PPT,提交到“微信群”。

【学生调研，教师线上指导】
学生采用线上调研的方式，开展调研。

教师使用“微信群”对学生进行指导。

（教师对各组调研成果进行评价】
教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。

课后：
【学生使用JaVaSCriP代码设计一个根据分数评价等级的程序】
小组成员团结协作，练习使用JaVaSCriP代码的相关内容；使学生掌握使用JaVaSCriP 代码编程的能力。

教师使用“微信群”对学生进行指导。

填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;
3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

jqx教学重难点设计

JQX教学重难点设计引言：JQX（JQuery eXtensions）是一个基于JavaScript库的扩展库，它通过对JQuery库进行扩展，提供了更多的功能和特性。

在JQX的教学过程中，学生可能会遇到一些重要而棘手的难题。

本文将探讨JQX教学中的重难点，并提供一些有效的解决方案，以帮助教师和学生更好地掌握和理解JQX的实用技术。

一、选择器的灵活运用选择器是JQX中最基础且最重要的部分之一。

学生在学习JQX 时，经常会遇到选择器灵活运用方面的困惑。

为了帮助学生理解和掌握选择器的使用，教师可以引导学生进行实践操作。

以下是一些建议的实践活动：1. 创建一个包含不同类别元素的HTML页面，并使用不同的选择器选取它们。

教师可以示范使用元素选择器、类选择器、ID选择器以及属性选择器等。

2. 在一个具有层级关系的HTML结构中，选择特定的元素进行样式修改。

教师可以引导学生使用父子选择器、相邻选择器和同胞选择器等。

3. 针对常见的表单元素，教师可以引导学生使用相关的选择器进行操作。

比如通过选择器选取表单元素的值、设定表单元素的属性等。

通过这些实践活动，学生可以更好地理解选择器的使用规则和注意事项，提高对选择器的熟练度和灵活运用能力。

二、事件处理与绑定事件处理与绑定是JQX教学中另一个重要而棘手的难点。

学生需要掌握如何通过JQX来绑定和处理不同种类的事件，以及如何传递参数、获取事件对象等。

以下是一些解决方案：1. 教师可以设计一系列与事件处理相关的实际问题，并要求学生使用JQX来解决。

比如，当鼠标悬停在某个元素上时，改变另一个元素的颜色等。

2. 引导学生使用各种不同的事件处理方法，如click()、mouseover()、keydown()等，并对比它们之间的异同点。

3. 引导学生使用on()方法来绑定事件，以及使用off()方法来解除事件绑定。

通过上述实践，学生可以更加熟悉和掌握事件处理与绑定的技巧，从而提高代码的可读性和可维护性。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript+jQuery 开发框架课程设计题目基于javascript的用户登录院（系）信息工程学院专业班级 14级计算机应用技术2班学生姓名丁文彬学号 1432101205设计地点新华学院教13指导教师陈洋起止时间：2016年5月30日至2016年6月5日目录一、前言------------------------------------------ 31.1课程设计思路---------------------------------- 31.2课程设计目标---------------------------------- 3二、关键技术--------------------------------------- 42.1HTML相关概念---------------------------------- 4 2.2css ------------------------------------------- 52.3javascript ------------------------------------ 6三、总体设计---------------------------------------- 7四、详细设计--------------------------------------- 9五、运行结果--------------------------------------- 19六、课设总结--------------------------------------- 19七、参考文献--------------------------------------- 22一、前言1.1课程设计思路在日常生活中我们常常登录用户界面都需要输入验证码，使用验证码可有效防止非法用户的暴力尝试，在现在的很多网站中都使用了各种验证码。

在本课程设计中我们采用了较为简单的验证码，就是采用随机产生的数字或符号，生成一幅图片，图片里加上一些干扰，由用户识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

在此我通过定义字符集数字、字母实组成验证码，在利用函数表达式for循环生成6位验证码，验证码输入完成后确定提交弹出提示框。

另外在此登录页面中还加入了万年历方便用户查看日期和时间。

1.2课程设计目标1. 熟练使用javascript和css中的内建对象最终实现一个登录页面的雏形。

2．熟练使用Get函数的使用和日期函数的调用，从而方便用户查看时间。

3．熟练使用javascript和html实现用户登录，从而提高网页访问速度。

4．能够熟练javascript，通过咨询和考察，最终确定并实验证登录。

同时使用户信息更加安全。

二、关键技术2.1HTML相关概念1.HTML语言HTML语言(Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。

用HTML编写的超文本文件称为HTML文件。

在WWW上，通常使用的发布语言是HTML，即超文本标识语言。

当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。

如图：WWW三个组成部分图2-1WWW的组成2.HTML文件结构<HTML><HEAD> <head>元素出现在文档的开头部分。

<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

<title></title> <title>元素定义HTML文档的标题。

<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

</HEAD><BODY>HTML 文件的正文//<body>元素表明是HTML文档的主体部分。

在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

</BODY></HTML>元素：是HTML语言的基本部分。

元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。

元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。

元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

2.2css1.css简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。

通过设立样式表，可以统一地控制HTML中各标签的显示属性。

级联样式表可以使人更能有效地控制网页外观。

使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。

在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。

如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。

通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。

2.3javascript1．javascript语言JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作。

2.JavaScript嵌入HTML文件JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。

1)、JavaScript 语句插入 HTML的方式：（1)使用 <SCRIPT> 标签将语句嵌入文档（2)将 JavaScript 源文件(.js)链接到 HTML 文档中2)、JavaScript 语句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入三、总体设计3.1通过定义字符集数字、字母实组成验证码var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q',' r','s','t','u','v','w','x','y','z', 'A', 'B', 'C', 'D', 'E', 'F ', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');3.2 通过函数表达式for循环生成6位验证码var codeLength = 6;for (var i = 0; i < codeLength; i++){var charNum = Math.floor(Math.random() * 52);code += codeChars[charNum];}if (checkCode){checkCode.className = "code";checkCode.innerHTML = code;}}3.3 通过输入验证码确定提交弹出提示框function validateCode(){var inputCode = document.getElementById("inputCode").value;if (inputCode.length <= 0){alert("请输入验证码！");}else if (inputCode.toUpperCase() != code.toUpperCase()){alert("验证码输入有误！");createCode();}else{alert("验证码正确！");}}3.4 通过时间函数获取当前时间<div id="timer" style="font:11px tahoma;height:10px;"> </div><script>setInterval("timeStr=newDate().toLocaleString();timer.innerText=timeStr;",1000) </script>3.5完成效果四、详细设计4.1网页的用户登录界面网站的网页的用户登录界面为用户的用户名和密码输入界面，并且包含验证码如果用户验证码输入错误则显示输入错误，同样输入正确也会显示。

用Javascript写入程序和读取程序。

登录信息主要包括用户名、密码、验证码。

<title>JavaScript验证码生成代码</title><meta charset="utf-8"/><head runat="server"><title></title><style type="text/css">.code{background:url(code.gif);font-family:Arial;font-style:italic;color:blue;font-size:18px;border:0;padding:2px 3px;letter-spacing:3px;font-weight:bolder;float:left;cursor:pointer;width:85px;height:35px;line-height:40px;text-align:center;vertical-align:middle;margin-left:235px;margin-top:-30px;}a{text-decoration:none;font-size:12px;color:#288bc4;margin-top:-30px;}#formwrapper {width:410px;margin:150px auto;padding:20px;text-align:left;border:3px ridge;}</style><script language="javascript" type="text/javascript">var code;function createCode() {code = "";var codeLength = 6; //验证码的长度var checkCode = document.getElementById("checkCode");var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的for (var i = 0; i < codeLength; i++){var charNum = Math.floor(Math.random() * 52);code += codeChars[charNum];}if (checkCode){checkCode.className = "code";checkCode.innerHTML = code;}}function validateCode(){var inputCode =document.getElementById("inputCode").value;if (inputCode.length <= 0){alert("请输入验证码！");}else if (inputCode.toUpperCase() != code.toUpperCase()) {alert("验证码输入有误！");createCode();}else{alert("验证码正确！");}}</script></head><body onload="createCode()"><div id="formwrapper" ><div><form id="form1" runat="server" onsubmit="validateCode()"> <label for="Name" style=" margin-left:0.5px">用户名：</label><input type="text" name="Name" id="Name" size="18" maxlength="30" /><br /><div><label for="password" style=" margin-left:16px">密码：</label><input type="password" name="password" id="password" size="18" maxlength="15" /><br /><label for="password">请输入：</label><input type="text" id="inputCode" style="" /><div class="div" id="checkCode"onclick="createCode()" ></div><div style="margin-top:-20px; margin-left:330px"><a href="#" onclick="createCode()">看不清换一张</a></div><br/><input id="Button1" onclick="validateCode();"type="button" value="确定" style=" margin-left:90px" /><input id="Button1" onclick="validateCode();"type="button" value="取消" style=" margin-left:10px" /></form></div></div></body></html>4.2网页的日历插件<HTML><HEAD><TITLE>万年历</TITLE><meta http-equiv="Content-Language" content="zh-cn" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript"></script><H2>万年历</H2><TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0><FORM NAME="wannianli" onSubmit="return false;"><TR><TD COLSPAN=7><CENTER><SELECT NAME="month" onChange="selectDate()"><OPTION>一月</OPTION><OPTION>二月</OPTION><OPTION>三月</OPTION><OPTION>四月</OPTION><OPTION>五月</OPTION><OPTION>六月</OPTION><OPTION>七月</OPTION><OPTION>八月</OPTION><OPTION>九月</OPTION><OPTION>十月</OPTION><OPTION>十一月</OPTION><OPTION>十二月</OPTION></SELECT><INPUT NAME="year" TYPE=TEXT SIZE=4 MAXLENGTH=4><INPUT TYPE="button" NAME="Go" value="查看" onClick="selectDate()"> </CENTER></TD></TR></FORM><tr><td align="center"><script language="Jscript">function today(){var now=new Date();var day=now.getDate();var month=now.getMonth();var year=now.getYear();if(year<2000)year=year+1900;document.write("今天："+year+"年"+(month+1)+"月"+day+"日");}</script><script language="javascript">today();</script></td></tr><FORM name="calButtons"><TR><TD align="center"><textarea FONT="Courier" name="calPage" WRAP=no ROWS=9 COLS=22 ></textarea></td></tr><TR><TD><CENTER><p><INPUT TYPE=BUTTON NAME="previousYear" VALUE="前一年"onClick="setPreviousYear()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="前一月"onClick="setPreviousMonth()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="今天"onClick="setToday()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="后一月"onClick="setNextMonth()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="后一年"onClick="setNextYear()"></p></CENTER></TD></TR></form></TABLE></center><hr /></BODY></HTML>五、运行结果4.1网页的日历插件截图图4-1网页的日历插件截图4.2网页的登录界面截图4-2网页的登录界面截图4.3网页的整体界面4.3网页的整体界面六、课设总结通过这次程序设计，我感慨颇多，首先认识到集体力量的伟大，没有集体智慧的结合，就不会有我们登录界面的运行，其次，我感觉这次课程设计不再局限于书本知识，而是让我们学以致用，是理论与实际相结合的产物。