Web前端开发实验教学指导书
《Web应用开发实习》实习指导书
计算机专业Web应用开发实习大纲及指导书计算机教研室2013.06一、实习目的1. 通过本课程实习及其前后的准备与总结，复习、领会、巩固和运用基于Web设计课堂上所学的基于Web开发方法和知识，初步掌握开发一个基于Web的系统分析、系统设计、系统实现、系统维护的方法，特别是快速原型开发、面向对象分析与面向对象设计。
2.了解软件工具与环境对于项目开发的重要性，并且重点深入掌握好一、两种较新或较流行的软件工具或计算机应用技术，为综合应用本专业所学习的多门课程知识（如：软件工程、程序设计语言、操作系统、数据库、网络编程等）创造实践机会。
3.通过参加小组团队的开发实践，为毕业后适应团队合作开发模式打下基础，了解项目管理、团队合作、文档编写、口头与书面表达的重要性。
并在课程设计实践中，提高自学能力，书面与口头表达能力，创造能力和与团队其他成员交往和协作开发软件的能力，提高今后参与开发稍大规模实际软件项目和探索未知领域的能力和自信心。
二、实习过程及具体要求1、分组并分工。
1~2人一组，并且明确每个学生在开发小组中扮演的角色及承担的职责(包括选出组长)。
2、小组自行选题，必须是基于Web的系统、网站的开发与设计，确定目标、方案，准备并试用开发环境与工具。
3、学习与搜集素材,借阅,购置必要的书籍与材料。
4、各阶段的开发工作:开发过程中，小组长应承担起领导责任，不定期召开小组开发工作研讨会（建议2－3次）。
会前有准备，会议最好有记录（包括日期、出席人员、主题、讨论纪要、结论与问题、计划与行动、分工），会后有分工和检查，保存好记录供老师检查（不强制要求）。
工作会议的可能内容是：1) 选题。
系统内容及开发方案研讨、小组成员分工、开发计划拟定。
2) 同类著名web系统浏览，分析，需求分析，原型及成员分工确认。
3) 原型主页设计及网页组织研讨。
4) 数据库设计及应用研讨。
5) 交互网页开发技术或其他专门开发技术或开发工具使用的研讨。
WEB技术基础实验指导书(实验2)
实验二、简单网页设计一、实验目的1．掌握JavaScript脚本的编写方法；2．掌握Javascript脚本操作DOM元素及常用方法调用；3．掌握HTML页面与Javascript脚本关联使用。
二、实验内容1．编写一个能够输入学生成绩的界面；2．编写Javascript代码，增加输入框并计算总成绩；3．编写一个显示当前时间的DIV文本块。
三、实验步骤1.编写一个能够计算学生成绩的界面；1)需要实现的界面如下：2)要求单击“增加”按钮后，能够增加一行学生信息；单击“计算”按钮后，能够计算出学生的平均分和学生人数；<html><head><title>JavaScript 实例</title></head><script language="JavaScript">var num=10;var names=new Array(num);var scores=new Array(num);for (i=0;i<num;i++){names[i]="";scores[i]="60";}function init(){}function calculate(){var total=0;for (i=0;i<num;i++){names[i]=frmMain.txtName[i].value;scores[i]=frmMain.txtScore[i].value;total+=parseInt(scores[i])}frmMain.txtAverage.value=parseInt(total/num);frmMain.txtTotal.value=num;}function getStudents(n){var content="";for (i=0;i<n;i++){content+="学生姓名：<input type='text' id='txtName' size=8 value='"+names[i]+"'> ";content+="学生成绩：<input type='text' id='txtScore' size=5 value='"+scores[i]+"'><br>";}return content;}function increaseArray(arr){var newLength=arr.length+1;var arrTemp=new Array(newLength);for (i=0;i<arr.length;i++)arrTemp[i]=arr[i];return arrTemp;}function addStudent(){names=increaseArray(names);scores=increaseArray(scores);names[num]="";scores[num]="60";num++;document.getElementById("students").innerHTML+=getStudents(1);}</script><body onload="init()">学生成绩录入：<hr><form id="frmMain">学生平均分：<input type="text" id="txtAverage" size=4> 学生人数：<input type="text" id="txtTotal" size=4><br><hr><br><div id="students"><script language="JavaScript">document.write(getStudents(num));</script></div><hr><input type="button" value="计算" onclick="calculate() "> <input type="button" value="增加" onclick="addStudent() "> </form></body></html>3)下面是本界面的部分源代码，请将其补充完整；<!--单击、计算平均分、增加行、使用数组。
《Web前端开发项目实训》教学实施方案
《Web前端开发项目实训》教学实施方案
一、课程安排
学时：18学时，9次课
课程性质：理论课
教学地点：网络运维实验室
教学时间：2017年12月15日起，周三7-8节、周五5-6节
授课班级：2015级信息管理与信息系统专业
二、教学安排
1、教学说明
（1）实训题目
共6个实训题目，每人选择1个题目，每组6人，独立完成。
每个项目都包含四个功能：静态网站、ajax读取数据、互联网服务调用、移动端适配。
（2）版本管理服务器
SVN服务器，为每个项目开设SVN项目库。
（3）作品发布服务器
Web服务器，为每个项目提供独立的Web托管服务，面向校内提供访问。
建设项目进度网站，包含学号、姓名、项目名称、统计信息，三个导航（SVN仓库、原型预览、项目作品）。
（4）数据接口服务器
数据接口服务器，针对6个项目题目各提供一组JSON格式的数据接口服务，提供带有授权性质的数据读写服务。
2、课程教学
表：教学计划一览表
3、课程考核
（1）考核分为三个部分：文档（设计、测试、总结）、项目成果（SVN、原型在线、成果在线）、查重（代码查重、文档查重、防作弊机制）。
（2）总成绩（100分）=文档*0.4+项目成果*0.6，查重不通过记0分。
（3）实训考核成绩作为本课程的期末考试成绩，实训成果作为课程设计成果。
《WEB前端开发案例教程》教学教案(上)
《WEB前端开发案例教程》教学教案（上）复习提问（5分钟）URL/HTTP/HTML的含义导入新课：（3分钟）制作网页的工具很多（Hbuilder、VScode等课下可自行了解，大同小异），Dreamweaver就是其中一种，它提供的可视化设计环境可非常方便地创建和编辑网页.因此本节介绍该软件的基本使用。
（超星平台利用“随机选人”功能，学生回答问题。
）新授：一、Dreamweaver CC2018界面介绍（2分钟）1、初始化设置（10分钟）（学生跟随教师一起操作）✧工作区布局✧设置字体选择菜单栏中的【编辑】→【首选项】选项，分类列表中选择“字体”，右侧设置“代码视图”合适的字号大小。
✧设置界面分类列表中选择“界面”，更改可应用程序主题和代码主题✧更改主浏览器和次浏览器分类列表中选择“实时预览”，主浏览器快捷键F122、界面介绍（15分钟）（教师演示知识点涉及的具体操作）菜单栏：文件、编辑、站点、窗口工具栏：“格式化源代码”按钮、“应用注释”按钮、“删除注释”按钮➢GIF格式GIF格式可以高度压缩图像，但它只能包含最多256种颜色，不适于表现真彩色照片或具有渐变色的图片。
GIF格式可以支持动画效果。
➢JPEG格式它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。
➢PNG格式Portable Networks Graphics,可移植的网络图形格式，是近年来新出现的一种图像格式。
二.插入图像使用标记img在网页中插入图像。
HTML代码如下：<html><head><title>无标题文档</title></head><body><img src="mid2.JPG" align="left" width="150" height="150" border="2" ><p>在西藏自助旅行，为高原神奇的风景如痴如醉的同时。
web技术实验指导书
web技术实验指导书Web技术实验指导书内容简介Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。
对于学生从事Web系统的研发、使用和维护有重要意义。
本课程概念多、内容涉及面广、系统性强。
通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。
本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。
通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。
实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。
在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。
中南大学信息科学与工程学院鲁鸣鸣制定上机实验要求及规范Web技术课程具有比较强的实践性。
上机实验是一个重要的教学环节。
一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。
但是容易忽略实验的总结，忽略实验报告的撰写。
对于一名大学生必须严格训练分析总结能力、书面表达能力。
需要逐步培养书写科学实验报告以及科技论文的能力。
拿到一个题目，一般不要急于编程。
正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。
一、实验报告的基本要求：一般性、较小规模的上机实验题，必须遵循下列要求。
养成良好的习惯。
姓名班级学号日期题目i. 问题描述ii. 设计简要描述iii. 程序清单iv. 结果分析v. 调试报告：实验者必须重视最后这两个环节，否则等同于没有完成实验任务。
Web前端开发实训案例教程
精彩摘录
《Web前端开发实训案例教程》是一本关于Web前端开发的实用教程，它通过 一系列的案例和实践，帮助读者深入了解Web前端开发的核心技术和最佳实践。 在这本书中，有许多精彩的摘录，这些摘录不仅展示了Web前端开发的精髓，而 且对于读者来说，它们也是学习和实践的宝贵资源。
这本书强调了Web前端开发的重要性。在现代的Web应用中，用户体验和交互 性是至关重要的。一个优秀的Web前端开发者能够通过优化页面性能、提高页面 加载速度、实现流畅的用户交互等手段，来提升用户的满意度和忠诚度。这是任 何一个成功的Web应用都不能忽视的环节。
从目录的结构和内容来看，该书的实用性和参考价值非常高。无论是初学者 还是有一定经验的Web前端开发人员，都可以通过阅读该书来提高自己的技能水 平和实战经验。该书还可以作为Web前端开发的参考书籍或工具书，为读者提供 实用的指导和帮助。
《Web前端开发实训案例教程》这本书的目录结构严谨、内容丰富、实用性 强，具有很高的参考价值。无论是初学者还是有一定经验的Web前端开发人员， 都可以通过阅读该书来提高自己的技能水平和实战经验。
本书的内容涵盖了Web前端开发的各个方面，包括HTML、CSS、JavaScript等基础知识，以及响 应式设计、移动端开发、性能优化等进阶内容。每个章节都以一个或多个案例为主线，通过详细 的案例分析和实践操作，帮助读者理解和掌握相关知识和技能。
在案例的选择上，本书注重实用性和趣味性，包括网站重构、移动应用开发、交互设计等多个方 面。同时，每个案例都提供了详细的实现步骤和代码示例，让读者可以轻松地跟随教程进行实践 操作。
这本书还强调了Web前端开发者的责任和使命。作为一个Web前端开发者，不 仅要掌握技术，更要用户体验、数据隐私和可访问性等问题。这需要开发者具备 一种全面的视角和责任感，以确保他们所开发的Web应用不仅技术先进，而且对 用户友好、对社会负责。
WEB-实验3-指导书
《WEB开发技术基础》课程实验指导书实验3 Javascript实验指导书三一实验目的：掌握JavaScipt基本语法，掌握JavaScipt在HTML中应用的三种方式，掌握添加JavaScipt 事件响应程序的方法，掌握使用JavaScipt进行表单信息验证和表单信息操作。
二实验内容及步骤：内容一：1、创建my-js.js文件2、创建register.html页面，在该文件中链接my-js.js文件，该页面内容如下：3、在my-js.js文件中实现功能：register.html页面加载完成后，根据系统日期更新register.html页面最顶端的日期。
提示：页面加载完成触发onload事件，获取系统日期可使用Date对象4、在my-js.js文件中实现下列函数：function isNull(str) //验证str是否是空function minLength(str,length) //验证str是否满足最小长度lengthfunction maxLength(str,length) //判断str是否满足最大长度lengthfunction isDigital(str) //判断str字符串是否是纯数字function isNumber(str) //判断str是否是整数function isDate(date1) //判断date1的格式是否为1988-1-19（①是否包含两个短线，②短线前后是否是纯数字，③月份是否正确，即在1-12之间，④日期是否正确）5、在my-js.js文件中给register.html页面上用户名文本框的失去焦点事件添加事件响应程序来验证文本框中内容的字符串长度，要求在改事件响应程序中调用minLength、maxLength函数6、在my-js.js文件中给register.html页面上口令框的失去焦点事件添加事件响应程序来验证用户的输入是否符合要求7、在my-js.js文件中给register.html页面上生日文本框的失去焦点事件添加事件响应程序验证用户的输入是否符合要求8、在my-js.js文件中给register.html页面上“提交并进行checkbox测试”按钮的单击事件添加事件响应程序，该程序的功能：创建数组对象，存储用户表单输入的信息，弹出消息框显示该数组对象的内容，用户点击消息框的确定按钮后打开checkboxTest.html页面。
《Web 前端技术技术基础》实验指导书
【自主实验】
图 2.5 定义列表 8
《Web 前端技术技术基础》实验指导书
1、编写网页，实现如图 2.6 所示的效果。其中页面上方水平分隔线粗细为 1、颜色为#000fff，页面下 方水平分隔线粗细为 1、颜色为#00ffff。
四、使用 EditPlus 自定义 HTML 模板
熟悉 EditPlus 软件的界面和操作方法，并完成以下任务： 1．用 EditPlus 编写一个网页，保存为“mytemplate.html”； 2．从菜单栏中选择“工具|参数设置（首选项）”命令，弹出“参数设置（首选项）”对话框，然后 选择“类别”中的“文件|模板”选项，右侧显示系统中已经加载的 5 个模板，如图 1.1 所示。
图 2.1 文字、段落格式化效果 6
二、使用预格式化标记 pre
《Web 前端技术技术基础》实验指导书
1．在上题步骤 12 后，接着插入预格式化标记 pre； 2．在 pre 标记直接编辑如图 2.2 所示的内容和格式（空格键、回车键），其中标题为 h1；
图 2.2 预格式化效果
3．保存文件并预览效果； 4．去除 pre 标记，再预览效果，比较两者的不同，理解 pre 标记的作用。
3．在 body 标记中插入段落 p 标记，并添加文字和超链接，实现如图 1.3 所示的效果。 添加超链接格式：<a href="/">火弧中文官方网站</a>
图 1.3 body 标记属性应用页面效果图
六、综合使用 HTML、CSS、JavaScript 技术设计网页
三、编写无序列表
1．新建 HTML 文件； 2．在 body 标记中插入无序列表标记 ul； 3．在 ul 标记中插入列表项标记 li，并输入项目名称； 4．根据需要设置 ul 或 li 标记的 type 属性改变列表项前面的符号； 5．保存文件为 sy2-3.html，实现如图 2.3 所示的无序列表。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web前端开发实验指导书20XX年09月目录实验1 HTML基础与布局元素 (3)实验2 表格与表单的应用 (6)实验3 框架 (8)实验4 CSS样式表基础 (12)实验5 CSS样式布局 (16)实验6 Dreamweaver制作网页 (19)实验7 网站设计 (22)实验8 JavaScript基础 (26)实验9 JavaScript对象 (29)实验10 DOM编程 (33)实验11 JavaScript常用特效 (36)实验1 HTML基础与布局元素一、实验目的1．掌握使用HTML的基本结构创建网页2．掌握使用行级和块级标签组织页面内容3．掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果任务3行级元素编写HTML代码，实现如图所示的页面效果。
任务4超链接编写HTML代码，实现导航菜单的链接●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。
●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。
●单击ww.html的返回链接可以返回到lj.html。
●单击“联系我们”，将自动打开本机的电子邮件程序。
小结及思考题扩展训练：实现如图所示的页面效果实验2 表格与表单的应用一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。
2. 会使用表格标签属性修饰美化表格。
3. 了解表单的基本形式，掌握表单元素的使用方法。
二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1. 使用的操作系统及版本。
Windows XP Professional2. 使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局小结及思考题编写HTML代码，实现如图所示的页面效果。
使用所学的表单元素相关知识，制作商城网站注册页。
实现如图所示的页面效果。
实验3 框架一、实验目的1、会使用框架集来创建框架，掌握target属性的使用方法。
2、实现基于框架基础上的页面跳转3、会使用iframe实现页面重用二、实验内容1 行列划分的框架2 窗口间的关联3 iframe的基本用法4 利用框架技术布局页面三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 行列划分的框架使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2窗口间的关联编写HTML代码，实现如图所示的页面效果1、右边框架设置name属性为"showFrame"；2、左边框架文件中，将链接目标设置为"showFrame"。
以此实现窗口间的关联。
任务3iframe的基本用法编写HTML代码，实现如图所示的页面效果。
任务4利用框架技术布局页面使用HTML编辑工具，编写HTML代码，实现一个简单的帮助中心页面，并实现基于框架的页面跳转，如图所示的页面效果。
框架结构分为上下两个部分，在下面部分中再分为左右两个部分。
target=#value，#value为页面跳转区域的框架名称。
框架上部及跳转页面内容可采用截图方式。
小结及思考题考虑如何实现这个页面？实验4 CSS样式表基础一、实验目的1．掌握类选择器和ID选择器的使用2．掌握文本和字体样式美化网页的使用3．掌握背景样式美化网页的使用4．掌握伪类样式控制超链接样式的使用二、实验内容使用HTML基本元素设计基本网页三、实验环境（3）使用的操作系统及版本。
Windows XP Professional（4）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 ID选择器使用HTML编辑工具，编写HTML代码，实现如图所示样式的页面效果任务2 背景设置，重复背景编写HTML代码，实现如图所示样式的页面效果任务3无序列表的修饰编写HTML代码，实现如图所示样式的页面效果。
任务4超链接编写HTML代码，实现如下图样式的链接小结及思考题扩展训练：实现如图所示的页面效果CSS各类选择器应用编写HTML代码，实现如图所示的页面效果。
列表修饰风格超链接实验5 CSS样式布局一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。
2. 会使用表格标签属性修饰美化表格。
3. 了解表单的基本形式，掌握表单元素的使用方法。
二、实验内容CSS样式应用及div+css布局三、实验环境（5）使用的操作系统及版本。
Windows XP Professional（6）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局小结及思考题扩展训练：编写HTML代码，实现如图所示的页面效果。
使用所学的表单元素相关知识，制作商城网站注册页。
实现如图所示的页面效果。
实验6 Dreamweaver制作网页一、实验目的1．使用Dreamweaver实现图文混编2．使用Dreamweaver实现表格3．使用Dreamweaver实现表单4．使用Dreamweaver实现框架5．使用Dreamweaver工具实现样式表二、实验内容使用Dreamweaver工具设计网页三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 使用Dreamweaver实现表格布局和图文混编任务2 使用Dreamweaver实现表格和表单页面任务3使用Dreamweaver实现样式表任务4使用Dreamweaver实现框架页面扩展训练：使用Dreamweaver工具，利用表格制作一个用户注册的表单页面，最后用CSS修饰。
实现如图所示的页面效果。
使用Dreamweaver实现框架页面布局，页面效果如图所示。
实验7 网站设计一、实验目的1. 根据网站开发流程制作网站2. 掌握使用<iframe/>制作网页模板3. 学会使用DIV+CSS制作简单的页面布局4. 学会使用Dreamweaver工具制作网页二、实验内容使用Dreamweaver工具设计网站，合理布局网页三、实验环境1. 使用的操作系统及版本。
Windows XP Professional2. 使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 创建站点按照步骤创建dangdang网站，并建立相应目录结构，如图所示。
任务2制作首页任务3制作模板任务4复用模板制作商品列表页面扩展训练：1、使用Dreamweaver工具，制作dangdang注册页面，页面效果如图所示2、制作购物车页面，页面效果如图所示。
实验8 JavaScript基础一、实验目的1. 掌握Javascript的变量定义与使用2. 掌握Javascript的运算符与表达式的应用3. 掌握Javascript的控制语句的使用4. 掌握Javascript的常用函数的使用5. 掌握Javascript的自定义函数的设计与调用二、实验内容JavaScript基础编程练习三、实验环境（1）使用的操作系统及版本。
Windows XP Professional（2）使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 用户输入成绩，程序输出相应的成绩等级。
要求成绩必须在0~100之间，否则提示错误并要求重新输入，等级分为优秀、良好、中等、及格和不及格。
如下图所示。
任务2 基本块级元素任务3 简单计算器根据提示输入操作数和被操作数（如图8.21所示），然后输入运算符（如图8.22所示），程序计算结果，然后弹出对话框输出表达式和结果，如图8.23所示。
任务4 用户输入最喜欢的一天，程序输出相应的信息。
周一->今天是这个礼拜的第一天，要好好工作。
周二->今天是这个礼拜的第二天，怎么感觉好困。
周三->今天是这个礼拜的第三天，工作好忙啊。
周四->今天是这个礼拜的第四天，怎么还没到周末啊。
周五->今天是这个礼拜的第五天，明天休息，今天晚上可以玩个够了。
周六->今天休息啊，可以好好放松一下了！周日->今天虽然也休息，但明天开始又要上班了。
不填->为什么不填周几呢？小结及思考题扩展训练：写一个的程序，页面效果如图所示。
逻辑：红球：从1~33 中，选取 6 个，不能够重复蓝球：从1~16 中，选取 1 个要求：点击“begin"，红球按从小到大的顺序输出提示：Math.random() 生成[0，1 )之间的随机数实验9 JavaScript对象一、实验目的1. 掌握使用数组对象常用方法2. 掌握使用字符串对象常用方法3. 掌握使用日期对象常用方法4. 掌握数学对象常用方法的使用5. 掌握创建自定义对象二、实验内容常用JavaScript对象的使用方法三、实验环境1. 使用的操作系统及版本。
Windows XP Professional2. 使用的编译系统及版本。
Dreamweaver CS6四、实验步骤及说明任务1 制作12小时的时钟需求说明显示年、月、日显示星期几显示时钟特效，时钟为12小时进制实现思路使用getFullYear()获得当前年份使用getMonth()+1获得当前月份使用getDate()获得当前日期根据getHours()获得的小时，使用if语句判断当前时间是否大于12使用getDay()获取当前表示星期几的数字，然后使用switch设置当前星期几任务2 实现一个小型计算器运用各种运算方法结合前面的知识制作一个简易的计算器。
提示：本题使用按钮被用户单击后执行函数的方法，所有的按钮都执行start（）函数，通过向start函数传递不同的参数完成不同功能。
在函数体内部可以通过switch条件分支进行判断，执行不同的运算，最后将结果存放在文本框中。
任务3 制作简单的网页动画setInterval（）方法可用于图片、文字等元素的移动。
利用该方法间隔显示不同的文字，如图9.21和9.22所示。
可以使指定div元素动态改变宽度，如图9.20和9.21所示。