1. 实践目的

1. 能够复述JavaScript的基本语法及脚本使用方法；

2. 能够使用JavaScript事件处理来实现事件响应；

3. 能够使用JavaScript 常用对象的方法来实现基本的数据处理；

4. 能够使用JavaScript DOM和BOM实现对文档节点属性和文本的操作；

5. 能够使用JavaScript事件对象以及事件监听实现对特定事件的监听；

6. 能够使用JavaScript对文档节点进行增加、删除操作。

2. 实践内容

1. 实现“多彩网页时钟”；

2. 实现银行金额的大小写转换；

3. 实现“简易计算器”；

4. 对表单数据进行验证；

5. 设计并实现“动态相册”。

实验所需图像素材：见课程资料-实验模板-实验素材。

3. 实践要求

【要求1】实现“多彩网页时钟”

具体要求如下：

1. 在网页中添加两个嵌套的div，父元素div使用图片填充背景，子元素div在父元素中水平居中、垂直居中。

2. 子元素div能够显示当前时间，并随着时间变化而变化。

3. 为子元素的文本内容添加随机颜色，每500毫秒变化一次。

4. 如果显示的时间（时、分、秒）小于10，需要在数字前补"0"。

【要求2】实现银行金额的大小写转换

具体要求如下：

1. 在网页中添加文本输入框、按钮、span元素等，如图所示。

2. 对输入的金额进行校验，要求金额不能为空，整数部分1~13位，小数部分可以存在也可以省略。若存在小数部分，小数至少一位。

3. 对输入的金额进行处理，包括所有前导零忽略不计，即"00100.11"处理为"100.11"；无论小数部分多少位，最终增加/保留至2位（不足位数用0补齐，超出位数直接舍弃），即"100.9999"处理为"100.99"。

4. 将输入的金额转换为银行小写金额（整数部分从个位开始，每3位增加一个逗号），并将结果显示在网页上。

5. 将输入的金额转换为大写（数字大写+数字单位），并将结果显示在网页上。

【要求3】实现“简易计算器”

具体要求如下：

1. 在网页中添加文本框和按钮并进行布局，效果图如图所示。

2. 为所有按钮添加事件监听，监听所有按钮的鼠标单击事件。

3. 点击"C"按钮时，将文本框中内容清空。

4. 点击"←"按钮时，将文本框中内容的最后一个字符删除。

5. 点"="按钮时，计算文本框中式子的计算结果，如果无法计算或计算结果为无穷，则显示"ERROR"。

6. 点击除"C"、"←"、"="之外的按钮时，将按钮的文字显示在文本框中。

7. 处理结算结果，使其只精确到小数点后15位，以解决0.1+0.2!=0.3的问题。

【要求4】对表单数据进行验证

具体要求如下：

1. 在网页中添加一个表单，并在表单中添加5个输入控件以及注册按钮。

2. 输入数据之后能够校验当前输入数据，点击注册时能够校验表单中所有数据。

3. 要求姓名不能为空，且不能超过10位。

4. 年龄必须是正整数，且在1-150之间。

5. 密码不能为空，且不能少于6位。

6. 确认密码不能为空，且必须和密码一致。

7. 手机号码不能为空，且必须为1开头的11位数字。

8. 如果失败，则在对应输入控件后面显示错误提示信息；如果校验成功，则在提示消息中添加img节点，显示一张"ok"的图像。

【要求5】设计并实现“动态相册”

具体要求如下：

1. 在网页中使用table或div+css进行布局，左侧为相册显示区域，右侧为相册分类名展示区域，效果如图所示。

2. 为相册的分类名（中国国宝、兵马俑、川菜、粤菜、新疆风情、客家土楼、民族乐器、青铜重器）添加事件监听，监听的事件包括鼠标点击、鼠标移入、鼠标移出。

3. 当鼠标点击任意分类名时，使用window对象跳转到百度搜索对应的分类内容。

4. 当鼠标移动到任意分类名上时（不移开），可以在左侧显示区域显示这类照片的第一张图像。

5. 当鼠标从任意分类名上移开时，在左侧显示区域使用定时器循环显示这类照片的图像。

6. 在搜索框内输入任意内容，点击搜索后，使用window对象跳转到百度图库搜索并进行内容搜索。

7. 为左侧显示区域添加圆角，并使用定时器实现透明度渐变。