实验实训指导人机交互界面设计.docx

完成相关JS代码：

考核内容

上交各个同学的时间页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）九时钟效果

实验（上机）目的

1、掌握时间对象的创建

2、时间的获取：

年月日，时分秒

3、掌握计时器：

setInterval的使用

4、CSS3旋转样式

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、时间的创建；newDate（）

2、时间的获取；时间对象的常用方法

3、时间的走动：

计时器的使用

4、CSS3旋转样式

实验（上机）内容

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

考核内容

上交各个同学的时间页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）十利用JSON给表单元素传值

实验（上机）目的

1、掌握JSON的数据格式

2、掌握JSON的遍历方式

3、掌握表单元素的获取方式

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、JSON的概念；

2、JSON的遍历循环：

for-in；

3、通过form.elements获取表单元素

4、给表单元素赋值的方法

实验（上机）内容

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

varinfo=document.forms[“info”];

varjson={

uname:

”John”,

school:

”MySchool”,

myself:

”这家伙很懒，什么都没有”

};

for（varkeyininfo.elements）{

info.elements[key]=json[key];

}

考核内容

上交各个同学的表单页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）十一图片切换效果

（1）

实验（上机）目的

1、掌握数组的概念和遍历

2、掌握getElementsByTagName的用法

3、掌握给标签动态添加事件的方法

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、数组概念；

2、数组的遍历：

for；

3、标签事件的添加方式

实验（上机）内容

点击缩略图，上面的大图更换地址。

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

考核内容

上交各个同学的页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）十二图片切换效果

（2）

实验（上机）目的

1、掌握数组的概念和遍历

2、掌握getElementsByTagName的用法

3、掌握给标签动态添加事件的方法

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、数组概念；

2、数组的遍历：

for；

3、标签事件的添加方式

实验（上机）内容

点击小点，上面的大图更换地址。

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

考核内容

上交各个同学的页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）十三登录页面

实验（上机）目的

1、掌握正则表达式的基本用法

2、掌握正则表达式常用规则的使用

3、掌握正则表达式对字符串的检测方法

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、正则表达式的概念；

2、正则表达式的常用规则；

3、正则表达式的test方法的使用

实验（上机）内容

按照要求对用户输入的内容进行检测，判断是否正确

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

考核内容

上交各个同学的页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）十四注册页面

实验（上机）目的

1、掌握正则表达式的基本用法

2、掌握正则表达式常用规则的使用

3、掌握正则表达式对字符串的检测方法

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、正则表达式的概念；

2、正则表达式的常用规则；

3、正则表达式的test方法的使用

实验（上机）内容

按照要求对用户输入的内容进行检测，判断是否正确

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

考核内容

上交各个同学的页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）十五动态生成广告并能删除

实验（上机）目的

1、DOM创建标签的方法

2、DOM删除标签的方法

3、DOM添加内容的方法

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、DOM创建标签：

document.createElement（）；

2、DOM删除标签的方法：

目标.parentNode.removeChild（目标）；

3、DOM添加内容的方法：

父标签.appendChild（目标）;

实验（上机）内容

用JS动态生成广告，点击“删除”能删除它。

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

考核内容

上交各个同学的页面。

要求：

页面代码工整、目录规范、结构清晰

实验（上机）十六进度条

实验（上机）目的

1、DOM获取标签属性的方法

2、DOM控制标签样式的方法

实验（上机）课时

2学时

实验（上机）环境

DreamwearverCS5+

预备知识

1、DOM获取标签属性：

ID.getAttribute（“xxxx”）；

2、DOM更改样式的方法：

ID.style.display=”xxxx”；

实验（上机）内容

实验（上机）步骤

1、建立站点，目录规范，文件关联正确

2、创建页面导航，页面板块要居中，宽度，高度根据效果图设定

3、依次按照效果图要求添加页面结构。

完成相关JS代码：

varbig=document.getElementById（“big”）;

vardivs=big.getElementsByTagName（“div”）;

varboxes=[];

for（vari=0;i<=divs.length-1;i++）{

if（divs[i].className==”box”）{

boxes.push（divs[i]）;

divs[i].getElementsByTagName（“div”）[0].style=divs[i].getAttirbue（“data-jd”）;

}

}

考核内容

上交各个同学的页面。

要求：

页面代码工整、目录规范、结构清晰